title: Display 2 different images (an alternate image for each image) on mouseover using one function
body: <p>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 biohazard 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.</p>
  
  <p>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.</p>
  
  <p>Here's the code I have for the function page (probably where the problems are):</p>
  
  <pre><code>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;
   }
  
  }
  </code></pre>
  
  <p>And here's the body script where I added event handlers with the object properties:</p>
  
  <pre><code>document.images[0].onmouseover = changePic_onmouseover;
  document.images[0].onmouseout = changePic_onmouseout;
  document.images[1].onmouseover = changePic_onmouseover;
  document.images[1].onmouseout = changePic_onmouseout;
  </code></pre>
  
  <p>Might not be the simplest way to do it but I need it set up like this.</p>