javascript - rollover effect on overlapping transparent images
Posted
by
user427969
on Stack Overflow
See other posts from Stack Overflow
or by user427969
Published on 2011-10-23T23:38:58Z
Indexed on
2012/10/29
23:01 UTC
Read the original article
Hit count: 222
Filed under:
JavaScript
I want to add rollover effect on overlapping transparent images.
For example:
The following image is divided into 5 parts and I want to add rollover effect (different image) on each of them
When O tried with div or img tag, the image is rendered as a rectangle so rollover effect is not proper. When i rollover on green part between yellow, the yellow image gets highlighted because its z-index is high.
Following is the code that I tried:
<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>
images => 
, 
, 
, 
, 
I don't want to use jQuery, if possible.
© Stack Overflow or respective owner
