afish674 Posted June 7, 2012 Share Posted June 7, 2012 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"> 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2012 Share Posted June 7, 2012 works for me, have you cleared cache? Link to comment Share on other sites More sharing options...
afish674 Posted June 8, 2012 Author Share Posted June 8, 2012 (edited) 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 June 8, 2012 by afish674 Link to comment Share on other sites More sharing options...
eTianbun Posted June 8, 2012 Share Posted June 8, 2012 http://w3schools...image_sprites Link to comment Share on other sites More sharing options...
dsonesuk Posted June 8, 2012 Share Posted June 8, 2012 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 More sharing options...
dsonesuk Posted June 8, 2012 Share Posted June 8, 2012 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 More sharing options...
afish674 Posted June 8, 2012 Author Share Posted June 8, 2012 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 More sharing options...
dsonesuk Posted June 8, 2012 Share Posted June 8, 2012 Even though I gave you a fix to your jQeury 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. Link to comment Share on other sites More sharing options...
afish674 Posted June 8, 2012 Author Share Posted June 8, 2012 (edited) 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 June 8, 2012 by afish674 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 8, 2012 Share Posted June 8, 2012 Remove img element, its not required now you are using a background image for anchor element, its overlapping the background image. Link to comment Share on other sites More sharing options...
afish674 Posted June 11, 2012 Author Share Posted June 11, 2012 I thought I had done, apperently it didn't save properly. That seems to have got it though! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now