2011-10-23 11 views
0

オーバーラップする透明イメージにロールオーバー効果を追加したいとします。例えばjavascript - オーバーラップする透明イメージのロールオーバー効果

次の画像が5つの部分に分割し、IはO DIVまたはIMGと試み、それらの各

enter image description here

にロールオーバー効果(異なる画像)を追加したいされていますタグを使用すると、画像は四角形としてレンダリングされ、ロールオーバー効果は適切ではありません。黄色の部分が緑色の部分でロールオーバーすると、黄色の画像が強調表示されます。これは、そのZ-インデックスが高いためです。

は、私が試したコードです:

<body> 
<br /> 
<img src="part1.png" onclick="console.log('test1');"/> 
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/> 
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/> 
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/> 
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>  
</body> 

画像=>part1part2part3part4part5

私は可能であれば、jQueryのを使用する必要はありません。

+1

jqueryはこの問題を本当に助けません。Raphael.jsのような描画ライブラリが必要です。 – Joe

+0

お返事ありがとうございます。これは絵ではありません。私の問題を説明するだけの例です。 5部はすべて画像です。よろしくご連絡ください – user427969

+0

コードの例を投稿できません?それは本当にブレインストーミングに役立ちます – Joe

答えて

0

感謝の気持ちでKolinkと他の人に感謝します。私はKolinkが提案したようにイメージマップを作成しようとしましたが、それは難しかったし、イメージにわずかな変更を加えてしまえば、新しいイメージマップを作成する必要がありました。

この部分をflash swfファイルに置き換えました。このようなことをフラッシュで作成するのははるかに簡単でした。

0

このようなやり方は、すべての画像要素を配置して、1つの大きな目に見えない(透明な)画像を上に置くことです(CSSの「大きな」、ファイルは実際に1x1ピクセルです)。そして、一番上のイメージにイメージマップを適用します。結果はここに表示されます:http://pokefarm.org/

+0

こんにちは、お返事ありがとうございます。あなたのアイデアは良いですが、私は非常にイメージマップを実装するために複雑になるMAPを持っています。よろしく – user427969

関連する問題