1

我这里有一些代码试图显示图片，然后将鼠标悬停在显示标题的某些部分上。

我有它处理文本，但不是图片。我几乎没有使用过 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>
4

1 回答 1

0

您可以使用 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-29T01:16:48.567 回答