Add onmouseover controls

Question

would like to add a play/stop button to an image onmouseover. I have several images in the same div that are called separately. If Image A is called I would like to have a arrow icon/button appear on the image. And onmouseout, the arrow/icon button to disappear from the image. I do not need this on all my images.

The functionality of the icon/button will be to change Image A to it's loop form and back.

Thanks for any help.

Here's what I have used so far: Not sure this is the most efficient way, but I have the main chart and call other charts as overlays, some are transparent layers some are not. When the main map is displayed, I want to call the buttons that float on top of the map. these will utilize the onmouseover/mouseout. And when clicked I want to change the main map to its loop version.

#chart
{

width: 1000px;
height:700px;
border: solid 1px #d9d9d9;
vertical-align: middle;
position: relative;
z-index: 1;
float: left;


}

<div id="chart">
<img name="mymap" src="http://www.dalta.com/still_image.gif" 
width="1000px" height="700px" alt="Map" align="middle" />

<div class="basemap" id="HI_basemap" >
<img src="WEB_HI_BASEMAP.gif" width="1000" height="700"></div>


<div class="basemap" id="HI_etp" >
<img src="WEB_HI_ETP_BASEMAP.gif" width="1000" height="700"></div>


<div class="basemap" id="HI_vor" >
<img src="WEB_VOR_HAWAII.gif" width="1000" height="700"></div>

<div class="basemap" id="HI_route" >
<img src="WEB_ROUTES_HI.gif" width="1000" height="700"></div>

</div>

Tried this instead, but need a way to make infinite loop between 2 images.

intImage = 2;
   function swapImage() {
   switch (intImage) {
   case 1:
   IMG1.src = "http://ftpweb.delta.com/weather/WEB0HR.gif"
   intImage = 2
   return(false);
   case 2:
   IMG1.src = "http://ftpweb.delta.com/weather/WEB.gif"
   intImage = 1
   return(false);
   }
   }

I call this with an onClick but it only lets me do the function 1 time. Any ideas?

Answer 1

Then you can add the id attribute, to the image A. Such as this:

<img src="link/to/file.png" alt="photo" id="a" />

Now the JS would be as:

$('#a').hover(function () {
  // do what so ever,
}
$('#a').mouseleave(function () {
  // do what so ever,
}

There are many other events in the API. You can use them, and execute the code. However to play/stop you can do this:

$('#a').hover(function () {
  $('.audioFile').play(); 
}

Answer 2

This can be achieved by giving a unique id to each of the images . Then use getElementById("some id") to get a reference to that image. Then attach the onMouseOver and onMouseOut events to these refernces. This task will become very simple if you give a systematic id to the images like img1,img2 etc since you can use a for loop in this case.