Relative image source path returns null using jQuery

Question

i've got a problem I need help with.

I am trying to create a mouseover animation using jQuery so that when a user hover over an image it shows a highlighted version of the image. I know I can do this with CSS, the problem is however that the content needs to be managed. So i wanted to write a function that matches a part of the image filename and use a wildcard for the rest of the filename.

Here is the HTML: This is the image that will always be shown unless a user hover over the image.

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/bgr_img.jpg' ?>" alt="First Image" />

When the user hover over the image, I would like to change the src:

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ?>" alt="First Image" />

On mouseout I would like the src to return to its previous state "bgr_image.jpg"

This is the jQuery I am using currently:

$(function() {
    $(".imgPath")
        .mouseover(function() { 
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg");
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg");
            $(this).attr("src", src);
        });
});

If I hover over the image right now, it will change the src to "null". I tried to use the path name without the domain included but it returns the same value.

Help would be much appreciated.

WolvDev · Accepted Answer · 2012-04-19 09:23:53Z

1

Why do you match your src or replace it? Just change it:

$(function() { 
    $(".imgPath").hover(
        function() { $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); },
        function() { $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); }
    ); 
});

EDIT:

match() returns an array of the matches: Access your src with [0]

$(function() { 
    $(".imgPath") 
        .mouseover(function() {  
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg"); 
            $(this).attr("src", src[0]); 
        }) 
        .mouseout(function() { 
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg"); 
            $(this).attr("src", src); 
        }); 
});

EDIT2:

<img class="imgPath" onmouseover="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />

<script>
    function changeImgSrc(img, imgsrc) {
        $(img).attr('src', imgsrc);
    }
</script>

OR:

<img class="imgPath" onmouseover="this.src = '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="this.src = '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />

edited Apr 19, 2012 at 9:23

answered Apr 19, 2012 at 8:24

WolvDev

3,2362 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mario S Over a year ago

Because I would like to use wildcards so that I can be applied to all the images in that section of the website. This method can only be applied to 1 instance, how could I apply it for lets say, 5 images with 5 different names. Write the functon 5 times over? Seems sloppy.

Mario S Over a year ago

It still returns null. if I use the same image in the match function, that is loaded. It wont show any errors because there is a match and the src is not null. However if try to match it to an image for its hover state, it will tell me the src is null.

WolvDev Over a year ago

I added a new solution in my post (EDIT2). Maybe this can help you.

Mario S Over a year ago

It clutters the html, but it will have to do, thank you for your time Andreas. It works fine. :)

fmgp · Accepted Answer · 2012-04-19 08:23:07Z

0

The "match" function returns a boolean, not a string (in mouseover function)

answered Apr 19, 2012 at 8:23

fmgp

1,63617 silver badges17 bronze badges

1 Comment

WolvDev Over a year ago

no, "match" returns the matches in an array or null if no match.

Chandresh M · Accepted Answer · 2012-04-19 08:48:07Z

0

There is no need to use match() and replace() function with this task

Do as following.

$(function() {
    $(".imgPath")
        .mouseover(function() { 

            $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");

        })
        .mouseout(function() {
            $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");

        });
});

EDITED:

Let say if you have this kind of scenario for multiple images:

<div class="imgPath"><img src="1.jpg" /> </div>
<div class="imgPath"><img src="2.jpg"  /></div>
<div class="imgPath"><img src="3.jpg" /> </div>
<div class="imgPath"><img src="4.jpg"  /></div>

So we can manage this with below code:

$('.imgPath img').hover(
    function(){
        $('.imgPath img').each(
            function(){
                $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");
            });
    },
    function(){
        $('.imgPath img').each(
            function(){
              $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");
            });
    }

);

I think this will help you more.

Thanks.

edited Apr 19, 2012 at 8:48

answered Apr 19, 2012 at 8:32

Chandresh M

3,4932 gold badges27 silver badges48 bronze badges

2 Comments

Mario S Over a year ago

Yes this works, just like the previous answer. However I would like to apply this to multiple images. With this method I can only apply it to 1 image.

Chandresh M Over a year ago

Please check my Edited portion of the Answer. Thanks

Collectives™ on Stack Overflow

Relative image source path returns null using jQuery

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related