2

これが可能かどうかはわかりません。

画像の特定の座標にハイパーリンクを配置する方法はありますか?

元

_____________________________________
|                                   |
|   xxx                             |
|   xxx                             |
|                                   |
|                                   |
|                                   |
|                    zzz            |
|                    zzz            |
|                                   |
|___________________________________|

xxx の位置にハイパーリンクを設定し、画像の zzz の位置に別のハイパーリンクを設定する方法はありますか。これを開始するにはどうすればよいですか？

4

4 に答える 4

5 
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

HTML coords 属性の詳細 http://www.w3schools.com/tags/att_area_coords.asp

于 2012-10-16T06:21:12.610 に答える
3

はい、それはで行うことができます<map>

<map name="a">
  <area shape="rect" coords="25,25,75,75" href='url'>
</map>
<img usemap="#a" src=image.png>
于 2012-10-16T06:21:03.400 に答える
3

この問題に取り組むには多くの方法があります。他の人はすでにMAPの使用について言及していますが、クリック可能なゾーンを作成するだけでなく、画像の上にテキストリンクを配置したいという意味かもしれません. リンクをピクセル レベルで配置すると仮定すると、その方法の 1 つは次のようになります。

<div id="myimagediv">
    <a id="linkxxx" href="xxx.example.com">xxx</a>
    <a id="linkzzz" href="zzz.example.com">zzz</a>
</div>

#myimagediv {
width: 150px;
    height: 100px;
    position: relative;
    background-image: url('myimage.jpg');
}
#myimagediv a {
    position: absolute;
}
#linkxxx {
    top: 10px;
    left: 10px;
}
#linkzzz {
    top: 70px;
    left: 70px;
}
于 2012-10-16T06:35:01.330 に答える
0

これは、「イメージ マッピング」と呼ばれるプロセスによって行うことができます。ピクセルごとにマッピングする必要があるため、非常に面倒です。インターネット上には、画像をマッピングするツールがあります。

于 2012-10-16T06:23:00.830 に答える