I'm trying to fade in images on top of an existing image when I mouse over them, without re-writing the same function for each image.Currently I have:\[code\]<script type="text/javascript"> $(document).ready(function() { $('.image').mouseenter(function() { //fade in hover image $(this.getAttribute("name")).fadeIn(500); }); $('.hoverimage').mouseout(function() { //fade out hover image $(this).fadeOut(500); }); });</script>......<!--base images--><img src="http://stackoverflow.com/questions/15648945/image1.png" class="image" name="hoverimage1"><img src="http://stackoverflow.com/questions/15648945/image2.png" class="image" name="hoverimage2"><img src="http://stackoverflow.com/questions/15648945/image3.png" class="image" name="hoverimage3"><!--image to appear when hovering over--><img src="http://stackoverflow.com/questions/15648945/image1_glow.png" class="hoverimage" id="hoverimage1"><img src="http://stackoverflow.com/questions/15648945/image2_glow.png" class="hoverimage" id="hoverimage2"><img src="http://stackoverflow.com/questions/15648945/image3_glow.png" class="hoverimage" id="hoverimage3">\[/code\]Assume that CSS is already there so that the hover image is placed on top of the base image. What my code tries to do is:
- When mouse enters div of "image1.png", it will get the name attribute "hoverimage1"
- Then it fades in an element with the ID "hoverimage1" by essentially executing $('#hoverimage1").fadeIn(500);