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.
