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中的圖像地圖標題？

回答

相關問題