4

4 つに分割する必要がある写真があり、各部分にはリンクが必要です。人々はまだ画像ホットスポットを使用していますか?

4

3 に答える 3

8

クライアント側のイメージマップについて話していると思います。

これらは現在も使用されており、HTML 4.01 と XHTML 1.1 の一部であり、現在のHTML 5ドラフトでも使用されています。

それらは使いやすく、すべてのブラウザでサポートされているため、単一の画像に「ホット スポット」を設定するのに適しています。この機能を提供するより優れた代替手段 (使いやすさ、ブラウザーのサポート、アクセシビリティー、HTML 仕様の一部であること) は思いつきません。

このような「ホット スポット」を 1 つの画像に配置することが推奨されるかどうか (ユーザーによる発見可能性が主な問題です) は、別の問題です。

于 2010-08-12T19:24:59.907 に答える
7

私の意見では、画像をリンクとして使用するのは不十分です。アクセシビリティが損なわれる可能性があり、使用する画像によってはMystery Meat Navigationが発生する可能性があり、これは不自由です.

代わりに、その画像を背景画像にします。

HTML

<div id="image-hotspot">
    <a href="#small-planets">Small Planets</a>
    <a href="#big-planets">Big Planets</a>
    <a href="#the-sun">The Sun</a>
</div>

CSS

#image-hotspot {
    background:url(http://onlyfunnyjokes.com/bestoftheweb/wp-uploads/earth_planets_size_comparison.jpg);
    height:650px;
    width:385px;
}
#image-hotspot a {
    display:block;
    text-indent:-10000px; /* you could also change the opacity instead*/
                          /* as a matter of fact I suggest using the opacity technique */
                          /* the text-indent has caused me troubles in the iPad browser */
    height:216px;
}

これらのアンカー要素<a>が必要な場所にあることを確認するには、より高度な CSS ポジショニングを使用する必要がある場合があります。

補遺

より関連性が高いと思われる別の例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title >Test</title>
    <style type="text/css">
    #image-hotspot {
        background:url(http://upload.wikimedia.org/wikipedia/commons/c/c4/Planets2008.jpg);
        height:720px;
        width:1280px;
        position:relative;
        top:0px;
        left:0px;
    }
    #image-hotspot a#the-sun {
        display:block;
        text-indent:-10000px;
        height:720px;
        width:200px;
        position:absolute;
        left:0px;
        top:0px;
    }
    #image-hotspot a#mercury {
        display:block;
        text-indent:-10000px;
        height:25px;
        width:25px;
        position:absolute;
        left:225px;
        top:275px;
    }
    #image-hotspot a#venus {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:40px;
        position:absolute;
        left:265px;
        top:250px;
    }
    #image-hotspot a#earth {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:45px;
        position:absolute;
        left:325px;
        top:250px;
    }
    #image-hotspot a#mars {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:45px;
        position:absolute;
        left:383px;
        top:250px;
    }
    #image-hotspot a#jupiter {
        display:block;
        text-indent:-10000px;
        height:125px;
        width:135px;
        position:absolute;
        left:450px;
        top:225px;
    }
    #image-hotspot a#saturn {
        display:block;
        text-indent:-10000px;
        height:125px;
        width:195px;
        position:absolute;
        left:610px;
        top:225px;
    }
    #image-hotspot a#uranus {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:60px;
        position:absolute;
        left:805px;
        top:250px;
    }
    #image-hotspot a#neptune {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:60px;
        position:absolute;
        left:887px;
        top:250px;
    }
    </style>
</head>
<body>
    <div id="image-hotspot">
        <a id="the-sun" href="#the-sun">the sun</a>
        <a id="mercury" href="#mercury">mercury</a>
        <a id="venus" href="#venus">venus</a>
        <a id="earth" href="#earth">earth</a>
        <a id="mars" href="#mars">mars</a>
        <a id="jupiter" href="#jupiter">jupiter</a>
        <a id="saturn" href="#saturn">saturn</a>
        <a id="uranus" href="#uranus">uranus</a>
        <a id="neptune" href="#neptune">neptune</a>
        <!-- <a id="pluto" href="#pluto">pluto</a> -->
    </div>
</body>
</html>
于 2010-08-12T19:37:21.003 に答える
0

イメージ マップを使用できます。人々がイメージ マップを好まない主な理由は、イメージの小さな部分をマップすることが多く、それがリンクであることを知らないためです。可能であれば、各画像をその点でラップするだけです<a href='link'>img</a>

于 2010-08-12T19:25:20.873 に答える