Question html/javascript

J'aimerais compléter la page web de ma collection et ajouter un effet : que lorsque l'on passe sur le nom du jeu, ou le mot "apercu", une photo apparaisse juste au dessus, et disparaisse sitôt le pointeur déplacé.

Des idées sir la façon de faire ? J'utilise dreamwavear ( c'est vieux, je sais) pour coder mes pages : je connais encore le html, mais pas javascripts.

Il faut du JavaScript, obligatoirement.

Il va falloir une petite fonction à appeler en ajoutant l'évènement "onMouseOver" sur les éléments qui devront le déclencher, et "onMouseOut" pour fermer le popup.

C'est pas énorme en code, mais pour faire ce genre de choses proprement, j'utilise généralement des librairies type jQuery qui ont déjà tout intégré.

Même réponse que Moo.

Euh oui, mais quelle genre de fonction ? ^^;

f(x) = x2+3x-2

Y =0 pour X = (-3 -sqrt(17))/2 et X = (-3 +sqrt(17))/2 .

eleve prodige^^

2+2=4 , ça vous la coupe hein !? ^^

lui vous le battrez jamais

_________________
Welcome To The Fantasy zone !
Get Ready !
Aaaaa...!
You're Doing Great !

Many More Battle Scenes Will Soon Be Available !

1+1=11, je m'incline ^^

fasse a lui, on est obligé de s'incliner, même lui s'incline lorsqu'il croise un miroir..

_________________
Welcome To The Fantasy zone !
Get Ready !
Aaaaa...!
You're Doing Great !

Many More Battle Scenes Will Soon Be Available !

Même chuck Norris ?

Non quand même pas, faudrait pas déconner ^^

_________________
Welcome To The Fantasy zone !
Get Ready !
Aaaaa...!
You're Doing Great !

Many More Battle Scenes Will Soon Be Available !

sylesis a écrit:: Euh oui, mais quelle genre de fonction ? ^^;

A écrire soi-même ! Il faut un petit <div> invisible dans la page, qui contient une image, et dans la fonction, il va falloir le faire apparaître, changer ses coordonnées, et l'URL de l'image, en manipulant le CSS. Bon, je vais pas faire un cours de JavaScript ici, mais avec quelques petits tutos là dessus, ça devrait pas être très compliqué Smile

Bon, je n'ai pas su écrire moi même, mais j'ai pompé et adapté :

http://sylesis.hostoi.com/collection/index-test.htm : que 5 photos faites pour l'instant.

A corriger maintenant :
_ mettre un style pour faire disparaitre les marches de la balise de lien
_ mettre des icones pour illustrer le style, genre ceux de smspower
_ mettre un preloader pour les images ?
_ repositionner l'image si le curseur est trop bas ? ( ca j'aurais du mal )

sylesis a écrit:: _ repositionner l'image si le curseur est trop bas ? ( ca j'aurais du mal )

C'est pas trop trop compliqué, il faut juste ajouter un "if" pour tester la position du curseur par rapport à l'écran.

En gros dans get_mouse :

skn.top = y+20;
if (y > window.innerHeight - 50) {
skn.top = skn.top - 50;
}

J'ai mis ça de tête avec des valeurs au pif, je me plante peut être sur la propriété window.innerHeight et sûrement sur la valeur de 50, mais en tâtonnant un peu ça se corrige Wink

Ok, j'ai compris l'idée : je vérifie l'attribut window.innerHeight.

si tu veux centrer ton bloc vis à vis de l'écran :
• il faut connaitre le window.innerheight (en pixel) (retourne la taille d'affichage "utile" du navigateur)
• il faut connaitre la taille du bloc a afficher (en pixel)
> si il est fixe : pas de souci, on la connait.
> si il est variable : voir plus bas.
• faire au final (window.innerheight - taille.bloc) / 2 pour trouver la position X (vis à vis du haut gauche de l'écran)

PS. la coordonnées 0,0 (x,y) du bloc tjs est défini par le coin haut gauche.

pour connaitre la taille du bloc quand celui-ci n'est pas fixe
avec jquery (plus simple):
var BlocHeight = $(#id-de-ma-div).height();
ou
var BlocHeight = $(.classe-de-ma-div).height();

Ensuite :
var PositionBlocH = (window.innerheight-BlocHeight)/2;
la variable PositionBlocH contient la valeur pour center le bloc en hauteur (vis à vis du haut de l'écran)
$(#id-de-ma-div).css('top',PositionBlocH);

Pas vraiment centré en fait, encore que c'est une idée. Ce que je voudrais juste, c'est que l'image apparaisse en entier : le si le curseur est bas, que l'image apparaisse au dessus. SI le curseur est en haut de l'affichage utile, qu'elle apparaisse en dessous (mais toujours à droite du pointeur ).
Enfin avec vos conseils, je devrais réussir à faire un truc : je code en java en temps normal, après tout.

Voila, ca devrait être bon : cliquez ici

Ou ainsi :

Code:: <html>

<head>

<script language="javascript">

</script>

</head>

<body>

<div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
<label id="zoneImg"></label>

</body>

</html>

» Question manette
» La question, pourquoi ?
» [question]Password
» Question disque dur sur PS3
» Question de zonage...