[jQuery] Making a bookmarklet to swap images
Here's a rough guide on making a bookmarklet to change the images in a
page on hover. This looks for images with "without" in the src and
replaces them with "with". For example, <img src="a-without.jpg">
becomes <img src="a-with.jpg">. This is useful for testing new
versions of an image on a page.
First, the jQuery:
jQuery("img[@src*=without]").hover(
function(){
withLink=jQuery(this).attr("src").replace('without','with');
jQuery(this).attr("src",withLink);},
function(){
withOutLink=jQuery(this).attr("src").replace('with','without');
jQuery(this).attr("src",withOutLink);
})
Second, wrap it in javascript:(function(){ ... })() and remove the
whitespace:
javascript:(function(){jQuery("img[@src*=without]").hover(function()
{withLink=jQuery(this).attr("src").replace('without','with');jQuery(this).attr("src",withLink);},function()
{withOutLink=jQuery(this).attr("src").replace('with','without');jQuery(this).attr("src",withOutLink);})})
()
Save this as a bookmark and click on it on any page with jQuery.