javascript - rollover effect on overlapping transparent images
<p>I want to add rollover effect on overlapping transparent images.</p>

<p>For example: </p>

<p>The following image is divided into 5 parts and I want to add rollover effect (different image) on each of them</p>

<p><img src="http://i.stack.imgur.com/7oufS.png" alt="enter image description here"></p>

<p>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.</p>

<p>Following is the code that I tried:</p>

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

<p>images => <img src="http://i.stack.imgur.com/DEB1n.png" alt="part1">, <img src="http://i.stack.imgur.com/txxXQ.png" alt="part2">, <img src="http://i.stack.imgur.com/eWBpr.png" alt="part3">, <img src="http://i.stack.imgur.com/ozHrf.png" alt="part4">, <img src="http://i.stack.imgur.com/NhOkP.png" alt="part5"></p>

<p>I don't want to use jQuery, if possible.</p>
