Afficher 2 images différentes (une image alternative pour chaque image) au passage de la souris à l'aide d'une fonction

Question

Je travaille depuis plusieurs heures pour essayer de terminer la dernière partie d'un labo. Ce que je dois faire est d'avoir ma page Web afficher deux fichiers d'image, avec des noms différents, changer d'image lorsque je survole sur eux grâce à une fonction. Quand je passe la souris sur la première image, elle doit changer pour un signe de radiation et quand je passe la souris sur la deuxième image, elle devrait se transformer en signe de danger biologique. Chaque fois que je déplace la souris d'une des images, cette image devrait revenir à un point d'interrogation. Je pense que je sais comment utiliser la même fonction pour travailler sur plus d'un gestionnaire d'événements; le problème est que je ne sais pas comment utiliser la même fonction pour changer l'image (au survol de la souris) en une image différente en fonction de l'image sur laquelle ma souris survole; Je ne sais pas comment faire pour que la fonction vérifie à quelle image onmouseover s'applique.

Je supposerais naturellement que j'utiliserais une instruction if pour cela, mais peu importe ce que je fais, je n'arrive pas à obtenir la fonction pour différencier les images. Il semble toujours vouloir utiliser la première image que j'ai énumérée. En ce moment, cela fonctionne exactement comme je le veux, sauf que les deux images changent à la même chose sur mouseover.

Voici le code que j'ai pour la page de fonction (probablement où les problèmes sont):

function changePic_onmouseover() 
{ 
if(document.images[0].onmouseover) 
{ 
    this.src = "02-Radiation.jpg"; 
} 
else if(document.images[1].onmouseover) 
{ 
    this.src = "03-Biohazard.jpg"; 
} 
} 
function changePic_onmouseout() 
{ 
if(document.images[0].onmouseout) 
{ 
    this.src = "01-Question.jpg"; 
    return true; 
} 
else if(document.images[1].onmouseout) 
{ 
    this.src = "01-Question.jpg"; 
    return true; 
} 

} 

Et voici le script du corps où j'ai ajouté des gestionnaires d'événements avec les propriétés de l'objet:

document.images[0].onmouseover = changePic_onmouseover; 
document.images[0].onmouseout = changePic_onmouseout; 
document.images[1].onmouseover = changePic_onmouseover; 
document.images[1].onmouseout = changePic_onmouseout; 

Peut-être pas le moyen le plus simple de le faire mais j'en ai besoin comme ça.

Answer 1

puisque vous avez dit que vous avez besoin de le structurer comme ceci, je ne mentionnerai aucune des raisons pour ne pas utiliser cette approche, et essayer de répondre directement à votre question.

cette ligne:

if(document.images[0].onmouseover) 

est juste tester « si la première image dans le document a une mouseover de toute sorte défini » et n'a rien à voir avec la fonction en cours d'exécution

si vous voulez de dire si l'élément d'exécution est appelé, puisque vous utilisez directement attachés gestionnaires (par opposition à la délégation de l'événement), il vous suffit de vérifier « ce »:

if(this == document.images[0]) 

ou, vous pouvez tester contre la cible de l'événement, mais qui aurait besoin d'un peu crossbrowser ... chicaneries quelque chose comme ça fonctionnerait

function changePic_onmouseover(e) { 
if(!e) e = window.event; 
var target = e.target || e.srcElement; 
if(target == document.images[0]) // do stuff 

Answer 2

Ce que vous faites réellement avec cette ligne:

if(document.images[0].onmouseover) 

est de vérifier si la propriété onmouseover a une valeur qui évalue à true. Comme vous lui avez assigné un événement, il sera toujours vrai.

Vous voulez comparer l'élément en cours pour déterminer qui il est:

if(document.images[0] == this) 

Lorsque vous attribuez les événements que vous savez quel élément il est, donc je trouverais plus facile d'avoir juste des fonctions distinctes pour chaque événement que d'essayer de savoir au moment de l'événement image à utiliser:

document.images[0].onmouseover = function(){ this.src = '02-Radiation.jpg'; }; 
document.images[0].onmouseout = function(){ this.src = '01-Question.jpg'; }; 
document.images[1].onmouseover = function(){ this.src = '03-Biohazard.jpg'; }; 
document.images[1].onmouseout = function(){ this.src = '01-Question.jpg'; }; 

Answer 3

que diriez-vous en utilisant uniquement css et: hover propriété pour changer l'image d'arrière-plan?

exemple

avez-vous vraiment besoin d'utiliser js pour ce faire? =) Bonne chance