Question

I am having an Floor Image in that i am using the “Usemap” attribute to link the coordinates.

Like this:

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <img src="5th_floor_screen-size.jpg" width="1372" height="906" border="0" usemap="#Map" /></td>
        </tr>
    </table>

 <area class="tooltip" shape="rect" coords="1232,550,1298,621" href="#" title="Store Room" />
        <area class="tooltip" shape="rect" coords="1301,550,1351,621" href="#" title="Record Room" />
</map>

Now what i need is i will be having two image like 1.Store Room 2.Record Room

for eg:

Suppose if do onmouseover on the store room the area which is in the store room should highlight and then onmouseover it should be display none and also recordroom.

How to implement this either in Jquery or javascript?..

FYR:

As this i need…

enter link description here

Answer 1

Check out this jsfiddle I made. Propably this helps you.

http://jsfiddle.net/SB77y/