jQuery - images map hover not working

Question

I have this code :

$("#menu1").hover( function () {
            $(".menu-wrapper").fadeIn("slow");             
})

and this HTML code :

<div style="position:absolute; left: 18px; top: 55px;">
    <img id="top" src="images/topNavigation.png" alt="" width="578" height="42" border="0" usemap="#Map2" />
    <map name="Map2" id="Map2">
        <area shape="rect" id="menu1" coords="467,7,538,35" href="#" />
        <area shape="rect" coords="309,10,415,33" href="#" />
        <area shape="rect" coords="163,8,271,36" href="#" />
        <area shape="rect" coords="47,6,122,34" href="articles" />
    </map>
</div>
<div class="menu-wrapper">
        <ul dir="rtl">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>

and it's not working

What is the problem?

what element are you trying to fade in? there are no elements with such class — Headshota, Apr 06 '11 at 13:16
@Headshota : it's a DIV element and I will put it in the code to see it — Saleh, Apr 06 '11 at 13:28

score 0 · Accepted Answer · edited May 23 '17 at 12:26

0

Here's the same problem solved by with plugin. you can use this.

using-jquery-hover-with-html-image-map

edited May 23 '17 at 12:26

Community

1
1

answered Apr 06 '11 at 13:33

Headshota

21,021
11
61
82

jQuery - images map hover not working

1 Answers1