css中的图像地图标题？

我在这里有一些代码试图显示一张图片，然后当鼠标悬停在显示标题的某些部分。css中的图像地图标题？

我使用文本，但不是图片。我几乎没有使用CSS，但更熟悉HTML。这里有什么问题，我怎样才能使它工作？理想情况下，它应该像“剑”一样工作。

<html> 
<body background="Gray.jpeg"> 

<style type="text/css"> 
ul, li { 
    list-style: none; 
} 

ul.bindel { 
    position: relative; 
    float: center; 
    width: 514px; 
    height: 528px; 
    /* background: url(Gladiators.jpeg) no-repeat; */ 
    background: url(http://4.bp.blogspot.com/_XJDCOO_PcIc/TRknvnbiNNI/AAAAAAAAEDg/6KPijl4Dtl0/s1600/Gladiators.jpg) no-repeat; 
    border: 1px solid #000000; 
} 

ul.bindel li a span.caption { 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 50px; 
    width: 270px; 
    padding: 5px; 
} 

ul.bindel li a:hover { 
    display: inline; 
    cursor: pointer; 
} 

ul.bindel li a:hover span.caption { 
    display: block; 
    border: 3px solid #333333; 
    color: white; 
    font-size: 17px; 
    background: #330000; 
    text-align: left; 
} 

a.bl { 
    width: 257px; 
    height: 264px; 
    margin-top: 0px; 
    margin-left: 0px; 
} 

a.bl:hover { 
    border: 3px solid #000000; 
} 

a.br { 
    width: 257px; 
    height: 264px; 
    margin-top: 0px; 
    margin-left: 258px; 
} 

a.br:hover { 
    border: 3px solid #000000; 
} 

a.bind { 
    position: relative; 
} 

a.bind span { 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 50px; 
    width: 270px; 
    padding: 5px; 
} 

a.bind:hover { 
    display: inline; 
    cursor: pointer; 
} 

a.bind:hover span { 
    display: block; 
    border: 3px solid #333333; 
    color: white; 
    font-size: 17px; 
    background: #330000; 
    text-align: left; 
} 
</style> 
<center><br> 
<a class="bind">Sword<span>The gladiators would use this in close combat.</span></a><br><br><br><br> 

<ul class="bindel"> 
    <li><a id="bl"><span class="caption">Left Side</span></a></li> 
    <li><a id="br"><span class="caption">Right side</span></a></li> 
</ul> 

</center></body> 
</html>

来源

2012-09-28 jackcogdill

您可以使用html ImageMap和一些javascript来实现这种功能。

我忍不住想这是一个粗糙的肮脏的实现，因为它在与我的屏幕分辨率（1366x768）不同的情况下使用时会中断。我认为你可以通过将图像和标题放在同一个div中来解决这个问题。然后，您可以使相关字幕的位置相对而非绝对。然后，左边和上边的共同点将与容纳图片的容器相关，而不是相对于浏览器窗口的左上角。这样做可能意味着代码可以在不同大小的屏幕上工作，如果图像不再以页面为中心，它也可以继续工作。

通过在剑和盾周围绘制简单的多边形，并在将它们输入html之前跟踪它们的x/y坐标，从而确定图像映射协调器。

只要改变的src图像（我用厌倦了等待加载测试的每个迭代的本地副本）

享受！

<html> 
<head> 
<style type="text/css"> 
a.bind { 
    position: relative; 
} 

a.bind span { 
    display: none; 
    position: absolute; 
    top: 20px; 
    left: 50px; 
    width: 270px; 
    padding: 5px; 
    border: 3px solid #333333; 
    color: white; 
    font-size: 17px; 
    background: #330000; 
    text-align: left; 
} 

a.bind:hover { 
    display: inline; 
    cursor: pointer; 
} 

a.bind:hover span { 
    display: block; 
} 

.caption 
{ 
    display: none; 
    border: 3px solid #333333; 
    color: white; 
    font-size: 17px; 
    background: #330000; 
    text-align: left; 
    position: absolute; 
    width: 270px; 
} 

#shieldCapt 
{ 
    left: 920px; 
    top: 380px; 
} 

#swordCapt 
{ 
    left: 600px; 
    top: 480px; 
} 
</style> 

<script> 
function myHover(element) 
{ 
    var hoveredElement = element; 
    var tgt = hoveredElement.getAttribute('tgt'); 
    tgt = document.getElementById(tgt); 
    tgt.style.display = 'inline'; 
} 

function myLeave(element) 
{ 
    var hoveredElement = element; 
    var tgt = hoveredElement.getAttribute('tgt'); 
    tgt = document.getElementById(tgt); 
    tgt.style.display = 'none'; 
} 
</script> 

</head> 

<body> 
<center> 
<br> 
<a class="bind">Sword<span>The gladiators would use this in close combat.</span></a> 
<br> 
<br> 
<br> 

<img src='img/gladiators.png' usemap='#imgMap'> 
<map name="imgMap"> 
    <area id='swordPoly' shape="polygon" tgt='swordCapt' onmouseover='myHover(this);' onmouseout='myLeave(this);' coords="227,307,261,309, 339,354, 328,371, 240,331, 227,307"> 
    <area id='shieldPoly' shape="polygon" tgt='shieldCapt' onmouseover='myHover(this);' onmouseout='myLeave(this);' coords="413,245, 475,215, 473,200, 511,307, 526,388, 497,408, 454,422, 422,339, 413,245"> 
</map> 

<br> 
<span class='caption' id='shieldCapt'>The gladiators would defend themeselves with this.</span> 
<span class='caption' id='swordCapt'>The gladiators would use this in close combat.</span> 

</center> 
</body> 
</html>

来源

2012-09-29 01:16:48 enhzflep

谢谢，尤其是对于解释。 – jackcogdill

不客气。 :)在回答这个问题后，我发现Gimp，Photoshop和其他人提供了一些工具来简化图像映射区域的创建。还没有尝试过它们，但是它们可能会缓解确定多边形协调性的任务。 – enhzflep

是啊，我总是可以使用一些在线工具来快速获取合作伙伴 – jackcogdill

css中的图像地图标题？

回答

相关问题