How Can I Show A Small Image And A Paragraph By Mouse Hovering On Another Mapped Image Area?

This will explain better what I want than my words: http://jquery-image-map.ssdtutorials.com/ Even though the tutorial is available but it is done using image overlays in photoshop

Solution 1:

Use the jQuery mouseover event.

You would attach it to the 'area' tags on document ready.

$(document).ready(function(){
    //this selector is selecting an element by the id of cr1.
    $('#cr1').on('mouseover', function(){
        //do your showing here
    });

    $('#cr1').on('mouseleave', function(){
        //do your hiding here
    });
});

for a generic handler you could do:

$(document).ready(function(){
    //this is an attribute selector.//'area' is the typ of tag to match//[name indicates the attribute is named 'name'//^= indicates the attribute 'name' should start with the value following this operator//'room'] think of this as indicating the value of the name attribute// should match: 'room*'
    $('area[name^="room"]').on('mouseover', function(){
        //do your showing here, be sure to show only //for the appropriate area. Maybe select on the id.
    });

    $('area[name^="room"]').on('mouseleave', function(){
        //do your hiding here. This could be generic unless you have//a multi-paragrah area instead of a single display area.
    });
});

Solution 2:

Here is what I did to make it work: I created a div with "mouseover" and "mouseleave" attribute. and inside it I received the id of another element that I want to appear when I hover my mouse on this div.

<div  
    onmouseover="document.getElementById('div1').style.display = 'block';"  <!-- element inside brackets will be shown-->
    onmouseout="document.getElementById('div1').style.display = 'none';"> 
<area shape="poly" id="cr1"class="jTip" coords="550,277,485,342,533,385,597,322"
href="car_park_1.html" alt="cr1" name="room-1">
</div>

I posted my own answer so that it might also help others doing the same task :)