将鼠标悬停在图像映射上时如何显示文本框？ [英] How to make text box appear when hover over on the image map?

查看：192
本文介绍了将鼠标悬停在图像映射上时如何显示文本框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在图像映射上将鼠标悬停在热点上时显示一个文本框。
这是我在悬停时做的文字显示。 

 < p class =ms-rteFontSize-3>< map name =FPMap0id =FPMap0 > 
< area title =点击查看href =http://google.comshape =rectcoords =26，106，133，237/> 
< area title =点击查看href =http://yahoo.comshape =rectcoords =322，113，414，250/> 
< area title =点击查看href =http://ask.comshape =rectcoords =402,35,488,96/> 
< area title =点击查看href =http://naver.comshape =rectcoords =598，115，682，254/>< / p>



但是，当我将鼠标悬停时，想要显示彩色的可见文本框。是否需要CSS？我不熟悉CSS，所以不知道在这里应用什么。





所以我编辑我的代码到 p> 

 < html> 
< head> 
< script src =/ sites / JQueryDemo / JS / jquery-1.10.2.min.jstype =text / javascript>< / script> 
< script src =/ sites / JQueryDemo / JS / jquery.SPServices-2013.01.jstype =text / javascript>< / script> 
< script src =// www.outsharked.com/scripts/jquery.imagemapster.js\">< ;; script> 
< / head> 
< body> 
 
  style =宽度：400像素;高度：240像素; USEMAP = ＃predflow地图 > 
< map name =predflow-map> 
< area shape =rectdata-name =a，allcoords =36,46,121,131href =google.com/> 
< area shape =rectdata-name =b，allcoords =113,76,198,161href =yahoo.com/> 
< area shape =rectdata-name =c，allcoords =192,50,277,135href =ask.com/> 
< area shape =rectdata-name =d，allcoords =262,60,347,145href =naver.com/> 
< / map> 
 
< div style =width：390px; height：120px; font-size：12px;> 
< div id =predflow-captionstyle =clear：both; border：1px solid black; width：400px; padding：6px; display：none;> 
< div id =predflow-caption-headerstyle =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）; 
 $ b $ 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）; 
} $（b）b））。bind（'mouseout'，function（）{
 if（！inArea）{
 map.mapster（'set'，false，'all'）; 
 } 
}）; 
< / script> 
 
< / body> 
 
< / html>

静止图像地图工作正常，但悬停时没有任何显示。我将jQuery插件添加到SharePoint，例如此处正常工作SharePoint网页。

解决方案

以下是如何在直接jQuery / javascript中执行所需的操作：

在这里工作jsFiddle



HTML： 

 使用说明：鼠标悬停在电脑显示器上以查看隐藏的DIV 
< div id =imagemap> 
< img src =http://img716.imageshack.us/img716/8287/3ylp.jpgwidth =275height =207usemap =＃Mapborder =0/ > 
< map name =Map> 
< area shape =polycoords =105,26,107,126,257,140,​​256,27href =＃id =CUST_1name =CUST：1/> 
< area shape =polycoords =10,21,14,178,71,184,69,19href =＃id =CUST_2name =CUST：2/> 
< area shape =polycoords =113,145,94,172,241,192,251,164,250,164href =＃id =CUST_3name =CUST：3/> 
< / map> 
< p> 
< div id =myDiv>除非将鼠标悬停在计算机的显示器上，否则此DIV隐藏< / div> 
< / p> 
< / div> 
 <！ - 覆盖在计算机组件顶部的黄色DIV ID号码 - > 
< div id =num_cust1> 1< / div> 
< div id =num_cust2> 2< / div> 
< div id =num_cust3> 3< / div>





javascript / jQuery： 

 函数hovIn（）{
 var areaID = $（this）.attr（'id'）; 
 // alert（'['+ areaID +']'）; 
 if（areaID =='CUST_1'）{
 $（'＃myDiv'）。show（）; 
 
 
 
函数hovOut（）{
 $（'＃myDiv'）。hide（）; 
} 
 
 $（'map area'）。hover（hovIn，hovOut）;





CSS： 

 ＃num_cust1 {
 padding：10px; 
 background-color：yellow; 
位置：绝对; 
 top：60px; 
 left：180px; 
} 
＃num_cust2 {
 padding：10px; 
 background-color：yellow; 
位置：绝对; 
 top：60px; 
 left：40px; 
} 
＃num_cust3 {
 padding：10px; 
 background-color：yellow; 
位置：绝对; 
 top：160px; 
 left：180px; 
} 
 #myDiv {
 display：none; 
宽度：50％; 
 height：50px; 
 padding：10px; 
 background-color：skyblue; 
}


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.

解决方案

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

这篇关于将鼠标悬停在图像映射上时如何显示文本框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆