3

重複の可能性:
HTML イメージ マップはまだ使用されていますか?

私はイメージを持っています:

ここに画像の説明を入力

クリックしたときに関数をバインドしたいもの。私が抱えている問題は、クリックしたときにその下にある div が別の関数を起動する必要があり、一番上の div の下にある空白のために乱雑になることです。

HTML イメージ マッピングでこの問題を解決できることは承知していますが、現在は非推奨になっていることは理解しています。私が使用できる代替手段はありますか？

4

2 に答える 2

1

読み直しましたが、あなたの問題をより完全に理解していると思います。

この jsFiddle を確認してください: http://jsfiddle.net/5p9DE/

これはほぼ同じものなので、#phone div を見ることができます: http://jsfiddle.net/BPbk6/

完全を期すために、コードは次のとおりです。

CSS:

#container {
    position: relative;
}

#phone {
    position: absolute;
    top: 34px;
    left: 70px;
    width: 250px;
    height: 25px;
    -webkit-transform:rotate(-11deg);
}

#phone a {
    display: block;
    width: 250px;
    height: 25px;
}

#phone a span {
    margin-left: -9999px;
}

HTML:

<div id="container">
    <div id="phone"><a href="/page.htm"><span>Link text</span></a></div>
    <img src="http://i.stack.imgur.com/8GvME.png">
</div>

そして、他の人が言ったように、HTML イメージ マップは引き続き使用できます。これは CSS の代替です。

于 2012-08-19T00:06:03.570 に答える
0

その画像と説明から何を達成しようとしているのかを正確に伝えるのは少し難しいですが、試してみます.

私が通常これにアプローチする方法は、画像をスライスすることです。実際の背景とクリック可能にしたい領域とは別の画像を作成します。次に、クリック可能な画像を背景として、必要<a>なものにリンクするタグに追加し、いくつかの css を使用して正しく配置します (おそらく、背景を持つ親に絶対的です)。フィドルのようなもので実際のコードを見せていただければ、私が何を意味するかを示すことができます...

于 2012-08-19T00:08:52.993 に答える