jQuery for Web Page Sprites: Spritely
Years back I tried to code my own JavaScript to get snowflakes to descend gracefully down the screen. Besides crashing the browser repeatedly I had limited, frustrating success at successfully creating and replicating independent sprites to move on the screen.
Well Artlogic have managed to create a jQuery plugin that is at version 0.1 but looks beautifully elegant, just go to spritely.net.
My expectation was that the birds in the header would stay in the header, being so used to Flash where the sprite is bounded by the box it is in. So I was surprised when I clicked further down the page and the bird came to the mouse, Fun stuff!
jQuery Mouseover for Inline Images
I was hoping to find a WordPress plugin for creating a mouseover or hover effect on an image that is not a hyperlink, but none is available. So what I wanted is for my client to be able to post an image on a page and in a simple way, swap the image onmouseover.
Here is what I did, when inserting an image into the web page I give it the class “swapper” and ame the mouseout or default state of the image -OFF:
<img class="swapper" src="http://xyz.com/coffee-OFF.jpg" />
Then the jQuery function to do the swapping:
<script>
$(document).ready(function(){
// do this on hover for images with the class swapper
$("img.swapper").hover(function() {
//Get the src attribute of the default image
rollSRC = $(this).attr("src");
//Replace -OFF with -OVER for the rollover version
rollOVER = rollSRC.replace('-OFF', '-OVER');
$(this).attr("src", rollOVER );
}, function() {
//revert to the original image
$(this).attr("src", rollSRC );
});
});
</script>
If you are using this on WordPress change all the $ signs to jQuery (eg jQuery(document).ready(function()...)
Now I should be able to explain to the client that they need to:
- Upload the two image states coffee-OFF.jpg and coffee-OVER.jpg into the same folder (case sensitive)
- Insert the default image with the class=”swapper”
So Simple how can it go wrong!
Of course I did not come up with this entirely on my own, the following articles all helped me:
http://www.atlantajones.com/web-dev/even-easier-jquery-rollovers/
http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/
http://www.frodesigns.com/2009/07/wordpress-jquery-image-rollovers/