Home/ Questions/Q 8004247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T16:51:48+00:00

I want to add rollover effect on overlapping transparent images. For example: The following

  • 0

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

enter image description here

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 => part1, part2, part3, part4, part5

I don’t want to use jQuery, if possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks Kolink and others for their responses. I tried to create image map as Kolink suggested but it was too difficult and also if i made a slight change to the image, then i would have to create a new image map.

    I replaced this part with a flash swf file. It was far easier for me to create this kind of thing in flash.

    • 0