Display 2 different images (an alternate image for each image) on mouseover using one function

I have been working for several hours trying to get the last part of a lab done. What I have to do is have my web page display two image files, with different names, change image when I hover over them through a function. When I hover over the first image, it should change to a radiation sign and when I hover over the second image it should change to a bio-hazard sign. Whenever I move the mouse off one of the images that image should change back into a question mark. I think I know how to use the same function to work on more than one event handler; the problem is I don't know how to use the same function to change the image (on mouseover) to a different image based on which image my mouse is hovering over; I don't know how to make the function check which image onmouseover is applying to.

I'd would naturally assume I'd use an if statement for this, but no matter what I do I can't seem to get the function to differentiate the images. It always seems to want to use the first image I have listed. Right now it works exactly like I want it to, except both images change to the same thing on mouseover.

Here's the code I have for the function page (probably where the problems are):

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开发者_如何学Python_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;
 }
 
}

And here's the body script where I added event handlers with the object properties:

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

Might not be the simplest way to do it but I need it set up like this.

---

since you said that you need to structure it like this, i won't mention any of the reasons to not use this approach, and try to reply directly to your question.

this line:

if(document.images[0].onmouseover)

is just testing "if the first image in the document has a mouseover of any sort defined" and has nothing to do with the currently executing function

if you want to tell if the executing element is being called, since you're using directly attached handlers (as opposed to event delegation), you can just check "this":

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

or, you can test against the event target, but that'd require a little crossbrowser chicanery... something like this would work

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

---

What you are actually doing with this line:

if(document.images[0].onmouseover)

is to check if the onmouseover property has a value that evalutes to true. As you have assigned an event to it, it will always evaluate to true.

You would want to compare the current element to determine which it is:

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

When you assign the events you know which element it is, so I would find it easier to just have separate functions for each event than to try to find out at the time of the event which image to use:

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'; };

---

how about using only css and the :hover property to change the background image?

exemple

do you really need to use js to do this? =) Good luck