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!

kgiannakakis · Answer 1 · 2008-12-19T06:49:45.630

5

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.

edited Dec 19 '08 at 06:49

answered Dec 18 '08 at 06:47

kgiannakakis

103,016
27
158
194

Yes this is correct - although you need to use $(".apple") rather than $("apple") (the latter is missing the period denoting a class). – Mark Bell Dec 18 '08 at 07:53

score 1 · Answer 2 · answered Dec 19 '08 at 07:24

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.

sliderhouserules · Answer 3 · 2008-12-19T09:40:00.873

0

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.

edited Dec 19 '08 at 09:40

answered Dec 18 '08 at 08:42

sliderhouserules

3,415
24
32

You obviously didn't read the question properly. Allison asked how to change the state of ALL apple images when only one is hovered over... – James Dec 18 '08 at 11:38
@JimmyP This would work assuming all apple images were contained within an tag with the class of apple though. You could just apply the :hover to the img tag, but support for this obviously wouldn't extend to IE. – Ian Oxley Dec 18 '08 at 11:44
You're right, I read that and just missed it as I was replying. Thanks for the snide comment though. – sliderhouserules Dec 19 '08 at 09:38
It's ok slider, I got your back. +1 for not being a jerk to the jerk. :) – Paolo Bergantino Dec 19 '08 at 22:44
The "snide" comment has been deleted now, just for the sake of context for anyone reading this stuff well after the fact. – sliderhouserules Jan 14 '10 at 21:23

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

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");

jQuery rollovers using multiple ids and classes

4 Answers4

Change the image source