Here is a snippet of code from my HTML file:
<img id="id1" src="photo1" usemap="#ir" >
<img src="photo2" id="id2"/>
<span>
<map name="ir" id="ir">
<area alt="" title="my title" href="my link" shape="poly" coords="13,15,29,34,10,65,1,39,17,57,357,77,15,64" />
</map>
</span>
In addition to this code, I have applied some CSS styling:
#id2 {display: none; opacity: 0.4;}
And here's the JQuery code for this part:
$(document).ready(function() {
$('span').on('mouseover',function() {
$('#id2').show();
}).on('mouseleave',function() {
$('#id2').hide();
});
})
However, when attempting to hover over the designated image area to reveal a different photo with reduced opacity, I encountered issues.
The secondary photo display was not consistent and the hyperlink functionality was unreliable.
It seems that the image swapping and linking functions are not synchronizing properly, only working sequentially rather than simultaneously.