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

Question

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.

(1) When you say "image map is working fine", what do you mean? What does the image map DO at this point? (2) Can you successfully do the `Hello World` example (step 6 on the [JQuery-with-SharePoint](http://www.codeproject.com/Articles/544538/JQuery-with-SharePoint-2010) page you referenced)? That way we know that jQuery is actually loaded and working. — cssyphus, Sep 05 '13 at 15:19
(1)Hotspots on imagemap still works fine. But what I want to do is text box appears when I hover over on hotspots on Imagemap. That's not working (2) I successfully did Hello World Example. So I am pretty sure jQuery is loaded fine. — user2747356, Sep 05 '13 at 15:30
In your code above, which ID (and element) is the text box that you want to appear/disappear on hover? — cssyphus, Sep 05 '13 at 15:31
Your textboxes *are* appearing and disappearing, but the coords for your image map are off. [See this screen shot](https://minus.com/lmkp1sOitxl5q) -- the mouse cursor is over the red square. [Here's another one](https://minus.com/l32hGW4FkzG1V) — cssyphus, Sep 05 '13 at 15:50
I fixed that error. I want text caption to appear when I hover over. All a,b,c,d captions. — user2747356, Sep 05 '13 at 15:51
Did you see my screen shots? It is working, but image map coords are off. Text boxes are appearing when my cursor is LEFT of the batman logo. (Mouse cursor is on red box, but not captured in screen shot) — cssyphus, Sep 05 '13 at 15:55
Please remember to choose a correct answer when you are happy with the solution. Remember, you can always ask another question. And another. And another... :) — cssyphus, Sep 05 '13 at 15:56
Oh alright something was off on my browser,I saw your comment after I posted mine. Thank you so much for your help! :) — user2747356, Sep 05 '13 at 16:09
Is this question still open? If not, please close the question (by choosing a best answer) and upvoting any answers that were helpful to you. You can come back later to do that if you don't yet have enough rep. If you wish to fine-tune your question, it is usually best to close the original question and ask a new one, because the new question will appear at the top of the list and will have maximum exposure. — cssyphus, Oct 29 '13 at 22:24
Shouldn't "map = $('#predflow')" be "map = $('#predflow-map')"? — Jonas Grumann, Mar 08 '17 at 09:56

score 2 · Answer 1 · answered Sep 04 '13 at 18:32

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;
}

I've edited my original question, can you take a look at edited question and see what I am missing? — user2747356, Sep 05 '13 at 15:02

score 1 · Answer 2 · answered Sep 04 '13 at 15:42

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.

answered Sep 04 '13 at 15:42

cssyphus

37,875
18
96
111

This is great, but I am going to use this code in SharePoint page, it seems like javascript doesn't work on SharePoint. Is there any other way to do this? – user2747356 Sep 04 '13 at 18:01
[Here is a link](http://www.codeproject.com/Articles/544538/JQuery-with-SharePoint-2010) discussing how to use jQuery/javascript with Sharepoint. Google `jquery and sharepoint` for more hits. – cssyphus Sep 04 '13 at 18:10
@user2747356 So far as I know, the only way to accomplish what you want is to use client-side scripting. I believe that javascript (and jQuery is a javascript library, you only need to load the library as described in link in my prev comment and jQuery will work) is the accepted language for client-side browser coding even on a SharePoint system. – cssyphus Sep 04 '13 at 18:36
Actually, it appears that jQuery doesn't play nice with SharePoint 2007 and earlier (see slide 6 in [this presentation](http://www.slideshare.net/mrackley/sharepoint-and-jquery-essentials)). – cssyphus Sep 04 '13 at 18:37
Hmm.. I use SharePoint2010. I may try again with the solution you posted. – user2747356 Sep 05 '13 at 13:12

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

2 Answers2

Linked