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

この種の機能は、htmlImageMapといくつかの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 に答える