Jump to content

.hover() jQuery method not triggering second arguement?


afish674
 Share

Recommended Posts

I've written a bit of code to swap two images on a hover.

$(document).ready(function hover(){$('#FB').hover(function() {  $(this).html('<img src="img/facebookHOV.png" width="32" height="32" alt="facebook icon hover" class="botMar">');}, function(){  $(this).html('<img src="img/facebook.png" width="32" height="32" alt="facebook icon" class="botMar">');});});

It changes to the hovered image fine, but its not firing the second function to swap it back to the first image again. I don't understand why? The HTML that exists before a hover event is: <img src="img/facebook.png" width="32" height="32" alt="facebook icon" class="botMar">

  • Like 1
Link to comment
Share on other sites

Tried clearing cache and tried it in Firefox, Chrome and IE. It still won't switch back to my first image. Maybe its to do with the HTML rather than the jQuery? My HTML code:

<div id="socialICO">  <a href="<!--LinkURL-->" id="FB"><img src="img/facebook.png" width="32" height="32" alt="facebook icon" class="botMar"></a>  <a href="<!--LinkURL-->" id="twitter"><img src="img/twitter.png" width="32" height="32" alt="twitter icon" class="botMar"></a>  <a href="<!--LinkURL-->" id="LIn"><img src="img/linkedin.png" width="32" height="32" alt="linked in icon"></a>  <script type="text/javascript" src="js/hover.js"></script>  </div>

I wonder if there is a better way of doing it?

Edited by afish674
Link to comment
Share on other sites

The better option for simply swap of images, is to use the css only option, create sprite image, which is two images combined into one, define the anchor element as display:block; set the height and width to 32px, use the sprite image as background.

a#FB { display:block; width: 32px; height: 32px; float: left; background: url (img/facebook_sprite.png) no-repeat 0 top; } a#FB:hover { background: url (img/facebook.png) no-repeat 0 bottom; }

Link to comment
Share on other sites

Ok! what i did notice, is that sometimes it gets stuck transferring from one image to another when you swap the whole html img element, the better option would be to swap 'src' information only + alt if required, doing this way showed no sign of sticking compared to original.

$(document).ready(function(){$('#FB').hover(function() {  $(this).children("img").attr("src", "img/facebook.png").attr("alt", "facebook icon hover");}, function(){$(this).children("img").attr("src", "img/facebook.png").attr("alt", "facebook icon");});});

Link to comment
Share on other sites

I changed the jQuery code to update only the attributes as you showed above and that fixed it! You seemed to be experiencing what I got, but mine was doing it all the time. Thanks for the the fix though! If I keep the jQuery over the image sprite solution, is it good practice to preload the images I'm using for my icon rollovers? If so how do I do that?

Link to comment
Share on other sites

Even though I gave you a fix to your jQuery problem the better option is still the sprite method, as it preloads both combined images in one go, so it is a instant swap from one to other, and it does not require javascript to work.
Just gave it a go. I had to remove the float (because this broke my layout, - https://dl.dropbox.c...%29/layout.html) and that seems to have stopped it from working.
a#FB { display:block; width: 32px; margin-bottom:5px; height: 32px; background: url (img/facebook.png) no-repeat 0 top; } a#FB:hover { background: url (img/facebookHOV.png) no-repeat 0 bottom; }

Edited by afish674
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...