How To Make Text Box Appear When Hover Over On The Image Map?

I am trying to make a text box appear when hover over hotspot on image map. This is what I did to make text to appear when I hover over.

<

Solution 1:

Here is how to do what you want in straight jQuery/javascript:

Working jsFiddle here

HTML:

Instructions: Mouse over computer's monitor to see hidden DIV
<divid="imagemap"><imgsrc="http://img716.imageshack.us/img716/8287/3ylp.jpg"width="275"height="207"usemap="#Map"border="0" /><mapname="Map"><areashape="poly"coords="105,26,107,126,257,140,256,27"href="#"id="CUST_1"name="CUST:1" /><areashape="poly"coords="10,21,14,178,71,184,69,19"href="#"id="CUST_2"name="CUST:2" /><areashape="poly"coords="113,145,94,172,241,192,251,164,250,164"href="#"id="CUST_3"name="CUST:3" /></map><p><divid="myDiv">This DIV hidden unless hover over the computer's monitor</div></p></div><!-- Yellow DIV ID numbers overlaid on top of computer components --><divid="num_cust1">1</div><divid="num_cust2">2</div><divid="num_cust3">3</div>

---

javascript/jQuery:

functionhovIn() {
    var areaID = $(this).attr('id');
    //alert('['+areaID+']');if (areaID == 'CUST_1') {
        $('#myDiv').show();
    }
}

functionhovOut() {
    $('#myDiv').hide();
}

$('map area').hover(hovIn, hovOut);

---

CSS:

#num_cust1 {
    padding: 10px;
    background-color:yellow;
    position:absolute;
    top:60px;
    left:180px;
}
#num_cust2 {
    padding: 10px;
    background-color:yellow;
    position:absolute;
    top:60px;
    left:40px;
}
#num_cust3 {
    padding: 10px;
    background-color:yellow;
    position:absolute;
    top:160px;
    left:180px;
}
#myDiv {
    display:none;
    width:50%;
    height:50px;
    padding: 10px;
    background-color:skyblue;
}

Solution 2:

Are you open to using jQuery?

If so, have you heard of the ImageMapster plugin?

See this link for demos: http://www.outsharked.com/imagemapster/default.aspx?demos.html

Since ImageMapster is a jQuery plugin, you will need the following lines in the head tag of your page:

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>

The first line loads the jQuery library, and the next line loads the ImageMapster plugin.

After that, it's just the code to make the imagemap work.

See the demos above for what you can do.