CODEWITHSUNDEEP
javascriptjqueryhtml
Steven Matthews
Steven Matthews

Reputation: 11265

Trying to change image source with Javascript, not working

I'm including the Javascript (jQuery really) in order to change the img src in question from one image to another image on hover.

However this isn't working - the images don't change at all.

My only guess is that the unnamed functions aren't doing what I want them to do.

My knowledge of jQuery is still somewhat new, so I'm stumped here and can't find any resources on what I might be doing wrong.

jQuery("#fbicon").hover(
function () {
    jQuery(this).attr("src","images/nohoverfb.png");
},
function () {
    jQuery(this).attr("src","images/fb.png");
});

jQuery("#linkedinicon").hover(
function () {
    jQuery(this).attr("src","images/nohoverlinkedin.png");
},
function () {
    jQuery(this).attr("src","images/linkedin.png");
});

jQuery("#googleplusicon").hover(
function () {
    jQuery(this).attr("src","images/nohovergoogle+.png");
},
function () {
    jQuery(this).attr("src","images/google+.png");
});

jQuery("#youtubeicon").hover(
function () {
    jQuery(this).attr("src","images/nohoveryoutube.png");
},
function () {
    jQuery(this).attr("src","images/youtube.png");
});

jQuery("#twittericon").hover(
function () {
    jQuery(this).attr("src","images/nohovertwitter.png");
},
function () {
    jQuery(this).attr("src","images/twitter.png");
});

jQuery("#emailicon").hover(
function () {
    jQuery(this).attr("src","images/nohoveremail.png");
},
function () {
    jQuery(this).attr("src","images/email.png");
});

Here is an example of the HTML:

<span class="icon"><a target="_blank" href="http://www.facebook.com/facebookname"><img id="fbicon" src="http://www.website.com/sites/all/themes/website/images/fb.png" style="height:48px;width:48px"></a></span>

Upvotes: 0

Views: 114

Answers (1)

MysticMagicϡ
MysticMagicϡ

Reputation: 28823

I think you are making a mistake in order of functions:

Try this:

$("#fbicon").hover(
    function () {
        jQuery(this).attr("src","images/fb.png");  //hover in function
    },
    function () {
        jQuery(this).attr("src","images/nohoverfb.png");  //hover out function
    });

Change all images accordingly in your code, and that should do what you want it to.

See the demo fiddle which changes background css to red on hover and blue when mouse leaves that div.

Hope it helps.

EDIT

I made a fiddle, with your html, which uses 2 images from internet. See that images are changed in Hover in, Hover out.

HTML:

<span class="icon"><a target="_blank" href="http://www.facebook.com/facebookname"><img id="fbicon" src="http://s2.reutersmedia.net/resources/r/?m=02&d=20141020&t=2&i=985015946&w=580&fh=&fw=&ll=&pl=&r=LYNXNPEA9J0XH" style="height:48px;width:48px"></a></span>

jQuery:

$("#fbicon").hover(
    function () {
        jQuery(this).attr("src","http://www.gizbot.com/img/2014/10/14-1413281227-sonyxperiaz3cropedimages600x450withwatermark3.jpg");  //hover in function
    },
    function () {
        jQuery(this).attr("src","http://s2.reutersmedia.net/resources/r/?m=02&d=20141020&t=2&i=985015946&w=580&fh=&fw=&ll=&pl=&r=LYNXNPEA9J0XH");  //hover out function
    });

Upvotes: 1

Related Questions