[HTML] image réactive avec html

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:

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:

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.