I have an image fade into another when on mouse over. The second image has image maps for links that the user will follow. Every time i try to click the map links the image fades back to the original first image. Here's my code so far. Help\[code\]<script type='text/javascript' src='http://stackoverflow.com/questions/js/jquery-1.9.1.min.js'></script><script type='text/javascript'>$(document).ready(function(){$("img.a").hover(function() {$(this).stop().animate({"opacity": "0"}, "slow");},function() {$(this).stop().animate({"opacity": "1"}, "slow");});});</script><style>div.fadehover { position: relative; }img.a { position: absolute; left: 0; top: 0; z-index: 10; }img.b { position: absolute; left: 0; top: 0; }</style></head><body><div class="fadehover"><img src="http://stackoverflow.com/questions/Background.jpg" alt="" class="a" usemap="#Map" border="0"/><img src="http://stackoverflow.com/questions/optiontwo.jpg" alt="" class="b"/><map name="Map" id="Map" class="maps"> <area shape="rect" coords="100,488,195,540" href="https://vimeo.com/lsufilmclub" /> <area shape="rect" coords="87,433,202,489" href="http://www.youtube.com/user/LSUFilmClub" /> <area shape="rect" coords="702,440,834,493" href="https://www.facebook.com/LSUFilmClub" /> <area shape="rect" coords="711,493,805,562" href="https://twitter.com/LSUFilmClub" /></map></div></body>\[/code\]