jQuery rollovers using multiple ids and classes

Question

I'm building a photo gallery and what I would like to do is make it so that as the user rolls over an image (let's say for the purposes of this question it's a picture of an apple), all the other images of apples on the page also show their "over" state.

Any and all help would be greatly appreciated, and thank you for your time in advance!

Answer 1

You could add the 'type' of the image as a class. For example an apple will be:

<img src='' class='apple fruit red' />

You can have as many space separated classes as you want.

Then add the following handler:

$(".apple").mouseover(function() {
   $(".apple").addClass("overState");
});

You need to define in your CSS the overState. On mouseout you must remove the class.

Answer 2

If these are links (anchor tag) you don't need jQuery to do this. You can use :hover in CSS.

a.apple:hover img {
  /* whatever you want to change here */
}

EDIT: Ignore me. This won't change all apple elements on the page at the same time. That's what I get for perusing SO late at night when I'm sleepy.

Answer 3

So each image has a number of tags (eg: "apple", "red", "big"), and when you mouse over the big red apple, you want all other apples, big things and red things to light up?

As kgiannakakis suggested, I'd put that data into the class attribute of the image - the only difference is that I'd prefix each class with something so you don't clash with other classes on your page.

<img src="the-big-red-apple.jpg" class="tagged tag-big tag-red tag-apple" />

I've also added an extra class there called "tagged" so you can tell your tagged photos from navigational images or whatever.

$('img.tagged')
    .each(function() {
        var thisClasses = this.className.split(/s+/); // array of classes.
        var search = [];
        for (var i = 0; i < thisClasses.length; ++i) {
            if (thisClasses[i].substr(0, 4) == "tag-") {
                search.push("." + thisClasses[i]);
            }
        }
        $(this).data("tags", search.join(","));  // ".tag-big,.tag-red,.tag-apple"
    })
    .hover(function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .addClass("highlight")
        ;
    }, function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .removeClass("highlight")
        ;
    })
;

What this does is initially loop through all your tagged images and work out what the tags are on each of them, storing that into that element's data(). This means we only need to do that once, and not each time.

Then it adds a hover event to each tagged image to find anything which matches any of this image's tags and add the "highlight" class. Similarly it removes the class when you mouseout.

Answer 4

Change the image source

This method would actually change the image sources in a uniform way, rather than just applying a class to them.

function swapImageGroup(imgSelector,suffix){
if (suffix == null) {suffix = "-hover";}
//imgSelector is the jQuery selector to use
//both imgSelector and suffix must be strings
$(selector).hover(
   function() {
      $(selector).each(function(){
      //store ".jpg" or ".png" or whatever as fileExtension
      var fileExtension = $(this).attr("src").substr($(this).attr("src").lastIndexOf("."));
      //replace something like ".jpg" with something like "-hover.jpg",
      //assuming suffix == "-hover"
      $(this).attr("src", $(this).attr("src").replace(fileExtension, suffix + fileExtension));
    });
    },
    function() {
      $(selector).each(function(){
      //chop off the end of the filename, starting at "-hover" (or whatever)
      //and put the original extension back on
      $(this).attr("src", $(this).attr("src").split(suffix + ".").join("."));
      });
    }
);
}

So you'd use the function like this:

swapImageGroup("img.apple");

or

swapImageGroup("img.foo","-active");