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.

    <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:

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

回答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:

<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.

来源：https://stackoverflow.com/questions/18617957/how-to-make-text-box-appear-when-hover-over-on-the-image-map

标签

html

css

sharepoint-2010

imagemapster