11548 sujets

JavaScript, DOM et API Web HTML5

Image au survol d'une image

Bonjour à tous

j'ai besoin de vos talents en javascript Smiley lol

Admettons une image1 et une image2

j'aimerai que quand on passe le curseur sur un lien représenté par une image1

une autre image appellé image2 s'affiche à la place de image1 (les deux images auront donc la même taille, l'image2 venant se surperposer sur l'image1, on ne verrais donc que image2 et plus image1)

et que bien sur le lien reste toujours actif avec les deux images...

vous voyez ce que je veux dire ? Smiley ohwell

Merci Smiley cligne
Modifié par PJK (17 Mar 2007 - 14:54)
La solution du rollover css fonctionne pour des fonds, pour les images effectivement c'est mieux d'utiliser le javascript.

Voilà un javascript qui fait ça:
function hoverImages(context){

  var myimages=new Array()
  
  var img = document.getElementById(context).getElementsByTagName('img');
  for (I = 0; I<img.length; I++) {
   
    myimages[I]=new Image()
    myimages[I].src=img[I].src.replace(".gif", "_hover.gif");

    img[I].onmouseover = function(){
      this.src = (this.src.indexOf("_hover") == -1)? this.src.replace(".gif", "_hover.gif"):this.src;     
    }
    img[I].onmouseout = function(){
      this.src = (this.src.indexOf("_hover") != -1)? this.src.replace("_hover.gif", ".gif"):this.src;    
    }
  }
}


Tu peux le mettre dans un fichier externe, par contre dans ton html, aprés les images il faut que tu mettes 


<script type="text/javascript">hoverImages('context');</script>

ou 'context' correspond au nom de la premiére div parente de l'ensemble de tes images.

Pour que ça fonctionne il faut que appele tes images image.gif et image_hover.gif

Pour plus d'info voir ici
Modifié par matmat (17 Mar 2007 - 16:22)
merci mais je ne comprends pas cette histoire d'image.gif et d'image_hover.gif

dans mon code html où est ce que je dois mettre le lien de l'image_Hover.gif ? Smiley confus
Dans ton code html tu ne met que ton image "image.gif". par contre dans ton dossier images, pour chaque image tu met une version nimportequelnom.gif et une version nimportequelnom_hover.gif.

Ce qui se passe c'est qu'au survol, le script remplace la valeur de l'attribut source (src) par la même valeur + _hover.
Sujet clos
Aller à