How to make text box appear when hover over on the image map?

Question

How to make text box appear when hover over on the image map?

24k Views Asked by user2747356 At 24 April 2025 at 20:41

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.

    <p class="ms-rteFontSize-3"><map name="FPMap0" id="FPMap0">
    <area title="Click to view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/>
    <area title="Click to view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/>
    <area title="Click to view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/>
    <area title="Click to view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/></p>

But instead of this, I want to make colored, visible text box to appear when I hover over. Is it something CSS is required? I am not familiar with CSS, so not sure what to apply here.

So I edited my code to this

 <html>
<head> 
<script src="/sites/JQueryDemo/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-2013.01.js" type="text/javascript"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</head>
<body>

<img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif" 
    style="width:400px;height:240px;" usemap="#predflow-map">
<map name="predflow-map">
    <area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" />
    <area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" />
    <area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" />
    <area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" />
</map>

<div style="width:390px; height: 120px; font-size: 12px; ">
    <div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
        <div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
        <div id="predflow-caption-text"></div>
    </div>
</div>

<script type="text/javascript">
var inArea,
    map = $('#predflow'),
    captions = {
        a: ["google"],
        b: ["yahoo"],
        c: ["ask"],
        d: ["naver"]
    },
    single_opts = {
        fillColor: '000000',
        fillOpacity: 0,
        stroke: true,
        strokeColor: 'ff0000',
        strokeWidth: 2
    },
    all_opts = {
        fillColor: 'ffffff',
        fillOpacity: 0.6,
        stroke: true,
        strokeWidth: 2,
        strokeColor: 'ffffff'
    },
    initial_opts = {
        mapKey: 'data-name',
        isSelectable: false,
        onMouseover: function (data) {
            inArea = true;
            $('#predflow-caption-header').text(captions[data.key][0]);
            $('#predflow-caption-text').text(captions[data.key][1]);
            $('#predflow-caption').show();
        },
        onMouseout: function (data) {
            inArea = false;
            $('#predflow-caption').hide();
        }
    };
    opts = $.extend({}, all_opts, initial_opts, single_opts);

    map.mapster('unbind')
        .mapster(opts)
        .bind('mouseover', function () {
            if (!inArea) {
                map.mapster('set_options', all_opts)
                    .mapster('set', true, 'all')
                    .mapster('set_options', single_opts);
            }
        }).bind('mouseout', function () {
            if (!inArea) {
                map.mapster('set', false, 'all');
            }
        });
        </script>

</body>

</html>

Still image map is working fine, but nothing appears when I hover over. I added jQuery plugin to SharePoint, example from here works fine on SharePoint page.

Original Q&A

There are 2 best solutions below

**cssyphus** · Answer 1

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:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//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.

**cssyphus** · Answer 2

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

javascript/jQuery:

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

function hovOut() {
    $('#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;
}

How to make text box appear when hover over on the image map?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in SHAREPOINT-2010

Related Questions in IMAGEMAPSTER

Trending Questions

Popular # Hahtags

Popular Questions