2


2

基本的に私はこれが必要です:

…​but instead of just having the tags recieve a border or fill color ロールオーバー時に、背景画像を受け取ります。 画像は sの形で切り取られる必要があります。

何か案は?

基本的に私が持っている設定は次のとおりです。


そしてロールオーバー時にそれぞれの `AREA`タグの背景画像を変更したいと思います。

私が欲しいものの偽バージョンはここにあります:

タンクアップイメージング com / css_dev / rollover.html

…​except that here, notice this is not a "true" image map, the rollover エリアは本当に `AREA`タグによって束縛されていません。

2 Answer


2


本当のイメージマップでこれができるとは思わない。


しかし、http://www.alistapart.com/articles/sprites [CSS sprites technique]のバリエーションを使用して、HTMLとCSSだけで望んでいることを実行する方法があります。 それを行う方法のチュートリアルはこちらです:http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

このテクニックの簡単な概観: デモコード

まず、通常どおりにイメージを作成します。 次に、画像のキャンバスサイズを2倍にしてホバーを画像の下半分に配置することで、さまざまなオーバーステートを作成します。 あなたはこのようなものになってしまうでしょう:

http://demo.raleighbuckner.com/so/1369820/test.jpg[あなたの画像がこれより見栄えが良いと思います。 http://demo.raleighbuckner.com/so/1369820/test.jpg]

次はHTMLとCSSです。 順不同リストを使用します。

#fakeMap {list-style:none;マージン:0。パディング:0。 / *デフォルトのULスタイルを削除します* / position:relative。 / * LIを配置することができます* / width:200px。 / *画像の幅* /高さ:100ピクセル。 / *画像の高さ* / background:url(test.jpg)no-repeat 0 0; / *は画像を表示します* /} #fakeMap li {position:absolute;} / *これらは "area"要素になります* /} #fakeMap {display:block;} / *幅と高さとともに、リンクを* / width:100%にします。 / * LIのフルサイズをクリック可能* /身長:100%。 text-indent:-5000px; / *リンクのテキストを画面外にプッシュします* /}

/ *各LIを正しいサイズと位置になるように設定します。 * /#maplink1 {幅:15ピクセル;高さ:15ピクセル。トップ:10px。左:10ピクセル。 #maplink2 {width:20px;}高さ:20ピクセル。トップ:30px。左:30ピクセル。 #maplink3 {width:80px;}高さ:30ピクセル。トップ:20px。左:70ピクセル。 }

/ *すべてのリンクに画像を設定します。 * / #fakeMap a:hover {background:url(test.jpg)no-repeat; }

/ *各リンクのbgの位置を個別に設定します。 * / #fakeMap#maplink1 a:hover {背景位置:-10ピクセル-110ピクセル; a:hover {background-position:-30px -130px;} #fakeMap#maplink2 #fakeMap#maplink3 a:hover {background-position:-70px -120px;} }


リンク1のテキストリンク2のテキストリンク3のテキスト


2


OK、私の解決策

そのようなイメージマップから始めましょう:


次に、ユーザーがそれぞれの特定の AREA`の上にマウスを持っていったときにjQueryを使って IMG`の SRC`属性を交換し、それからマウスアウトで IMG`をオフ状態に戻します。

$(document).ready(function(){

//set off state
var nav_off = "/images/nav-off.jpg";

// functions for over and off
function over(image){$( "#main-nav")。attr( "src"、image); function off(){$( "#main-nav")。attr( "src"、nav_off);} }

$( "#画像マップ領域")。hover(function(){var button = $(this).attr( "id"); over( "/ images / nav-" button ".jpg");}、function( ){off();});

;));

これはおそらくCSSスプライトと組み合わせることができ、ロールオーバー中にある画像の `background-position`を交換します。