Unable to display multiple tooltips on a single image

Question

pardon my code for redundancy...I was trying to create popup images which contains some button controls inside it using jquery.

Here is what i tried so far: CSS code:

button.button { color: #fff; background: #000; font-size: .8em; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; border: solid 1px #ffcf31; }
.tooltip{
background:transparent url(~/Box.png); display:none;
height:180px;
padding:0px 0px 10px 30px; width:320px;
font-size:14px;
color:#000; overflow:auto; border:2px solid black; }

Javascript code:

    $(document).ready(function () {
        $("#Harmful_id").tooltip({
            offset: [10, 2],
            effect: 'slide'
        });
    });
    function replyclick(a) {
        var e = document.getElementById(a);
        if (!e) return true;
        if (e.style.display == "none") {
            e.style.display = "block";
        } else {
            e.style.display = "none"
        }
        return true;
    }

HTML code:

<img id="continuum" src= "~/abc.png" alt="" usemap="#JQTooltip" style="width: 766px; height: 397px; border:0px"/>
    <map id="JQTooltip_map" name="JQTooltip">
    <area shape="rect" id="Harmful_id" coords="98,158,189,215" href="#" alt="" title=""/></map><div class="tooltip">
     <button type="button" class="button" id="btn1" onclick="replyclick('view1');"><b>1.</b></button><b onclick="replyclick('view1');"><u>Definition</u></b><div id="view1" style="display:none">Bla bla bla</div>

This works for only 1 part of the image map i.e coords="98,158,189,215". I would like to map for other co-ordinates as well on the same image.

I want to know what changes should I make to accomodate mapping other co-ordinates!

Jeff B Jeff B · Accepted Answer · 2013-01-03T17:47:03

You might want to look at this answer:

Using JQuery hover with HTML image map

Specifically, this plugin looks to be very robust and have a lot of cool features:

Image Mapster

Unable to display multiple tooltips on a single image

1 Answers