Html 当鼠标悬停在图像地图上时，如何使文本框显示？

当鼠标悬停在图像地图上的热点上时，我试图使文本框出现。 这就是我在鼠标悬停时使文本显示的方法

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

在SharePoint页面上运行良好。
您愿意使用jQuery吗

如果是的话，你有没有听说过

有关演示，请参见此链接：

由于ImageMapster是一个jQuery插件，因此在页面的head标记中需要以下行：

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



第一行加载jQuery库，下一行加载ImageMapster插件

在那之后，它只是使imagemap工作的代码

请参阅上面的演示，了解您可以做什么。
以下是如何在jQuery/javascript中实现您想要的功能：


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>

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

function hovOut() {
    $('#myDiv').hide();
}

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

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


CSS:

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>

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

function hovOut() {
    $('#myDiv').hide();
}

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

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

这很好，但我将在SharePoint页面中使用这段代码，看起来javascript在SharePoint上不起作用。还有别的办法吗？讨论如何在Sharepoint中使用jQuery/javascript。Google
jquery和sharepoint
获取更多点击率。@user2747356据我所知，实现所需功能的唯一方法是使用客户端脚本。我相信javascript（而jQuery是一个javascript库，您只需要按照我上一篇评论中的链接加载库，jQuery就可以工作）是客户端浏览器编码的公认语言，即使在SharePoint系统上也是如此。实际上，jQuery在SharePoint 2007及更早版本中似乎表现不佳（请参见中的幻灯片6）嗯。。我使用SharePoint2010。我可以用你发布的解决方案再试一次。我已经编辑了我的原始问题，你能看看编辑后的问题，看看我遗漏了什么吗？（1）当你说“图像地图工作正常”时，你是什么意思？此时图像贴图的作用是什么？（2） 您能否成功地完成
Hello World
示例（您引用的页面上的步骤6）？这样我们就知道jQuery实际上已经加载并工作了。（1）imagemap上的热点仍然可以正常工作。但我想做的是，当我将鼠标悬停在Imagemap上的热点上时，文本框会出现。（2）我成功地完成了Hello World示例。因此，我非常确定jQuery加载得很好。在上面的代码中，哪个ID（和元素）是要在悬停时显示/消失的文本框？请注意代码中的以下错误：
您的文本框正在显示和消失，但图像映射的坐标已关闭。--鼠标光标在红方块上。