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?

Could you please provide any code that you have tried so far? — SimplyAzuma, Feb 28 '14 at 18:54

score 0 · Answer 1 · answered Feb 28 '14 at 19:01

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.

score 0 · Accepted Answer · answered Feb 28 '14 at 19:08

0

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(); 
}

answered Feb 28 '14 at 19:08

Afzaal Ahmad Zeeshan

15,669
12
55
103

Ok I think I found a simpler solution for what I need. A function that switches back and forth between the still shot and the animation. The only problem is it only allows 2 onclicks. Is there any way to loop thru this or provide an infinite loop? Added code above. – wxchic Mar 01 '14 at 01:09

Add onmouseover controls

2 Answers2