Image resize with Hover Intent

For a project i was working on the images the client wanted to show were really quite small, I thought it woul dbe nice to load in larger ones, after page had loaded, and give the user the option of seeing more. It wasn’t implemented in the end, but I still think it has numerous applications, not necessarily in it’s current form. Feel free to hack.

$(document).ready(function() {

It's most likely that you're laoding in small images, if so we need to grab the larger ones, 
so that when they are made larger there is not pixelation.
Some other examples of timeout/hover function can be seen here: ------------------------------- */ $('SELECTOR').each( function(){ el = $(this); //replace the src with link to new images - this might need to be played with depending on your filename... this.src = this.src.replace("landscape_75", "landscape_300"); el.css('width','75px'); } ); $("SELECTOR").hover( function () { el = $(this); //transfer jQuery this to variable - not sure why but doesn't work if you just use $(this)'timeout', setTimeout( function () { //Set the function to start after 500 miliseconds el.stop().animate({ "width": "300px" }, 200); //stop any prior animations, animate width (height was set to auto in my case) }, 500)); }, function () { clearTimeout('timeout')); //on hover out, clear timeout, and animate back to original size. el.stop().animate({ "width": "75px" }, 200); }); });