1

次のようにコード化されたリンクでもある画像があります。

  <a href="../www.google.com"><img src="pages/squirrely.png" /></a>

それらは正常に機能しますが、写真の一般的な中央をクリックした場合にのみ、リンクにしたいと思います. 画像の外側の領域をクリックしても、リンクが発生することは望ましくありません。線の幅と高さを変えてみましたがうまくいきませんでした。私のcssは：

#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff; 
 }
4

2 に答える 2

2

この場合、イメージマップは使用しませんが、次のようにします。

HTML:

<div class='container'>
 <img .../>
 <a ... ></a>
</div>

CSS:

.container {
 position: relative;
}
.container img {
 width: 100px;
 height: 100px;
 border: 5px solid #fff;
}
.container a {
 display: block;
 width: 60px;
 height: 60px;
 position: absolute;
 top: 25px;
 left: 25px;
}

基本的に、これによりリンクが画像の上に配置されます。この方法でリンクの位置と寸法を操作する方がずっと簡単だと思います。(私はコードをテストしませんでしたが、動作するはずです)

于 2012-07-28T23:30:57.083 に答える
0

マッピングの座標を選択できる Web アプリケーションがいくつかあります。私はこれを試して大成功を収めました：

http://www.maschek.hu/imagemap/imgmap

これがあなたのプロジェクトに役立つことを願っています!

于 2012-07-28T22:44:21.293 に答える