CODEWITHSUNDEEP
jqueryclasshover
Jamie Kembel
Jamie Kembel

Reputation: 23

Help with multiple image jquery hover

Hey guys, sorry I am new to Jquery. I have always tried to do everyting with CSS but I am trying to cut my code down significantly for a website. What I am trying to do, is have it so that when one div.class img is hovered, that it will change the source file of 2 images at the same time. I can get this to happen, but I need those two images to have different source files. I am also trying to keep the code simple enough that I can set my image source in the HTML and not have to set every image in the script. The reason for this is the actual application will have several 100 images. Defining the rollover states in CSS and in the script is too bulky and messy.

Here is what I have so far. 

    <script>
    $(function() {
       $(".on img").hover(
            function() {
    $(".on img").attr("src", $(".on img").attr("src").split(".").join("_hover."));
}, 
function() {
    $(".on img").attr("src", $(".on img").attr("src").split("_hover.").join("."));
        });
   });

    </script>

So I am using a DIV class to specify any of the images that I want to change, or that will be hovered. So any image will have that rollover state, when any other image in that class is hovered.

The problem is right now, that when all the images in that class change, they are all changing to the SAME image source where I need them to change to their own image source. So x.jpg becomes x_hover.jpg and y.jpg becomes y_hover.jpg, etc.

Here is the HTML so for this example.

    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>
    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>

Thanks!! Anyone that can help, it will be greatly appreciated. I am new to Jquery and I have been searching for days on how to do this.

-JK

Upvotes: 2

Views: 2877

Answers (3)

David Thomas
David Thomas

Reputation: 253318

The easiest way I could come up with for this, to change the src of the hovered-over element is:

$('.on img').hover(
    function(){
        var cur = this.src.split('.');
        var extension = cur.pop();
        this.src = cur.join('.') + '_hover.' + extension;
    },
    function(){
        this.src = this.src.replace('_hover','');
    }
);

JS Fiddle demo.

Edited in response to question, in comments to this answer, from @Jamie:

Do you know how I can make this apply to ALL images that are in that div class, but have each image change to it's own image? For example: a.jpg to change to a_hover.jpg, then back to a.jpg while b.jpg changes to b_hover.jpg, then revert back to b.jpg. I want all of these image to change at the same time, if the cursor is hovering an image in that div class.

The following jQuery script will take care of that for you:

$('.on img').hover(
    function(){
        $('.on img').each(
            function(){
                var cur = this.src.split('.');
                var extension = cur.pop();
                this.src = cur.join('.') + '_hover.' + extension;
            });
    },
    function(){
        $('.on img').each(
            function(){
                this.src = this.src.replace('_hover','');
            });
    }

);

JS Fiddle demo.

Edited to fix the above URL, which, for some reason, was to an image rather than the demo. Silly me...it now links to the actual demo. Sorry.

Upvotes: 2

Gary Green
Gary Green

Reputation: 22395

Just my take with regex

$('.on img').hover(function() {
  this.src = this.src.replace(/(.*)(\.[^.]+)$/, '$1_hover$2');
}, function() {
  this.src = this.src.replace(/_hover(\.[^.]+)$/, '$1');
});

Fiddle: http://jsfiddle.net/nWc2D/

Upvotes: 1

James Montagne
James Montagne

Reputation: 78650

try this:

$(function() {
    $(".on img").hover(
            function() {
                   $(this).attr("src", $(this).attr("src").split(".").join("_hover."));
            } , 
            function() {
                   $(this).attr("src", $(this).attr("src").split("_hover.").join("."));
           });
   });

In this context $(this) will give you the hovered image rather than all images with that class.

Upvotes: 0

Related Questions