Question

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

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

Answer 1

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

我不禁想到这是一个粗略恶劣的实现，因为它与我的屏幕分辨率（1366x768）不同时会中断。我认为你可以通过将图像和标题放在同一个div中来解决这个问题。然后，您可以将字幕的位置设为相对位置，而不是绝对位置。然后，您的左侧和顶部坐标将相对于保存图像的容器，而不是相对于浏览器窗口的左上角。这样做可能意味着代码可以在不同大小的屏幕上工作，如果图像不再以页面为中心，它也会继续工作。

通过在剑和盾牌周围绘制简单的多边形，在将它们输入到html中之前跟踪它们的x / y co-ords来确定图像映射的合作。

只需更改图像的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>

css中的图像地图标题？

1 个答案: