Question

Beginner question here. I’m going to make a Jquery function that is used to change an image when hovering over it. I use the id name as the selector. How do I make it generic so that I don’t have to have a copy of the function for every single tag with a rollover image?

$("#home img").hover(    
        function(){ 
            blah
        },
        function(){ 
            blah
        }
 );

Answer 1

You can do rollovers without js (as long as you don’t need compatibility with IE6).

HTML:

<div class="imgHover">
    <img class="default" src="...">
    <img class="roll" src="...">
</div>

CSS:

.imgHover .roll {
    display: none;
}

.imgHover:hover .roll {
    display: block;
}

 .imgHover:hover .default {
    display: none;
}   

if you need compatibility with IE6, this should work (it’s untested, though):

$('.imgHover').hover( 
     function() {
         $('.default', $(this)).hide();
         $('.roll', $(this)).show();
     },
     function() {
         $('.default', $(this)).show();
         $('.roll', $(this)).hide();
     }
}