Bonjour,
comment obtenir l'effet suivant:
lorsque la souris passe sur la petite image une autre image apparait en plus grand.
merci
Bonjour,
comment obtenir l'effet suivant:
lorsque la souris passe sur la petite image une autre image apparait en plus grand.
merci
un petit fichier nommé image.js contenant le script suivant :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 function precharger() { var img_list = na_preload_img.arguments; if (document.preloadlist == null) document.preloadlist = new Array(); var top = document.preloadlist.length; for (var i=0; i < img_list.length; i++) { document.preloadlist[top+i] = new Image; document.preloadlist[top+i].src = img_list[i+1]; } } function changer(name, nsdoc, rpath, preload) { var img = eval((navigator.appName == 'Netscape') ? nsdoc+'.'+name : 'document.all.'+name); if (name == '') return; if (img) { img.altsrc = img.src; img.src = rpath; } } function restaurer(name, nsdoc) { var img = eval((navigator.appName == 'Netscape') ? nsdoc+'.'+name : 'document.all.'+name); if (name == '') return; if (img && img.altsrc) { img.src = img.altsrc; img.altsrc = null; } }
Dans la page HTML
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <html> ... <head> ... <script src="image.js"></script> ... </head> <body> ... <a href="mapage.html" onmouseout="restaurer('mapage', 'document.menu.document')" onmouseover="changer('mapage', 'document.menu.document','grandeimage.jpg', true);"><img src="petiteimage.jpg" name="mapage"></a> ... </body> </html>
J'utilisearis plutot du css pour faire ca. Une bonne technique consite à placer une image en background qui contient les deux images (l'image original et l'image au survol). En suite sur le :hover de l'élément changer le background-position.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager