背景画像にリンクを設定する

背景画像（CSSで設定）にリンクを貼りたいので、マップタグの代替手段があるのですか？ HTML5またはエレガントなJSソリューションですか？背景画像にリンクを設定する

注：画像自体はマップではありません。私はちょうど私がマップタグを使用することをお勧めすることはない特定の位置に

おかげ

出典

2012-03-27 Wel

どの要素の背景画像ですか？ HTML/CSSを含めることができますか？ – ManseUK

平易なリンクまたは領域ですか？ – j08691

背景画像を保持しているdivのonclickイベントがトリガされたときに、マウス座標をキャッチすることができます。座標によっては、別のページを読み込むことができます。それはあなたが念頭に置いたことですか？ – Amberlamps

を5つのリンクを配置します。あなたはそうすることのすべてのSEOの価値を失う。

<div id="backgroundElement"> 
<a href="#" id="link1">Follow Me on Twitter</a> 
<a href="#" id="link2">Follow Me on Facebook</a> 
<a href="#" id="link2">Follow Me on Google+</a> 
</div>

とCSSの使用

#backgroundElement{ position:relative; background:url(image/bg.jpg) no-repeat; } 
#link1{ position:absolute; top:150px; left:200px; background:url(image/icon/twitter.png) no-repeat; height:24px; width:24px; display:block; text-indent:-9999em; }

リンクがトップで、それがバックグラウンド上の場所です決定します左：私はあなたが同様の構文を使用してお勧めします。高さと幅が設定されていることと、表示ブロックとテキストインデントがテキストを削除し、正しくフォーマットするように設定されていることを確認します。

出典

2012-03-27 16:13:54 Blazedd

あなたのリンクが長方形である場合には、簡単な解決策は、position:relative背景にposition:absoluteリンクを使用することです。

あなたのリンクが非矩形である場合は、背景要素上でクリック（）イベントをキャッチすることができ、その後、座標は、あなたの「熱い」区域と一致した場合に適切な処置を行います。

は、両方の技術のコードサンプルのためhttp://jsfiddle.net/STjfz/2/を参照してください。

出典

2012-03-27 16:46:45

背景画像にリンクを設定する

答えて

関連する問題