Search code examples
jqueryhtmlimagemap

Getting image map rollovers to behave correctly

I'm using a couple of image maps to create some triangular buttons, but am having some difficulty getting the hover effects (inline jquery, not ideal but can't find an alternative) to behave correctly. 

<div id="triangle">
    <img src="triangle.png" alt="..." usemap="#imgmap"/>
    <map name="imgmap" id="imgmap">
        <area shape="poly" coords="0,100,50,0,100,100" href="#" target="_self" onmouseover="$('#prevslide').css('opacity','1');" onmouseout="$('#prevslide').fadeTo(600,0);" />
    </map>
</div>​

See this jsfiddle for an example. The states trigger ok with careful use, but it begins to fail when you hover over a few times in quick succession.

How can I prevent this?

Solution

  • Apply a .stop() in your animation - DEMO

    <map name="imgmap" id="imgmap">
    <area shape="poly" coords="0,100,50,0,100,100" href="#" target="_self" 
          onmouseover="$('#prevslide').stop().css('opacity','1');"    
          onmouseout="$('#prevslide').stop().fadeTo(600,0);" />
</map>