canvasSwap

Description

A jQuery plugin to induce an image swap on hover. Although this plugin does it's job of swapping out images extremely well , that's not what it's main intention is. What canvasSwap sets out to do is not only provide a great image swap utility, but it also allows swapping transparent PNG images in IE 6! (with the help of a PNG transparency script)

You can download canvasSwap on Google Code

Usage

Example 1: To induce an image swap on images with the class of 'myswap', the image to swap having a suffix of '_hover', and IE 6 PNG support enabled.

$(document).ready(function(){
	
	$.fn.canvasSwap.defaults.suffix = '_hover';
	
	$.fn.canvasSwap.defaults.ie6_support = true;
	
	$('img.myswap').canvasSwap();

});

<img src="myimage.png" alt="myimage" class="myswap" width="300" height="225"/>

Example 2: To induce an image swap on images with the class of 'myswap' inside a container having the id of 'navigation_container' , the image to swap having a suffix of '_swapped_image', and IE 6 PNG support disabled.

$(document).ready(function(){
	
	$.fn.canvasSwap.defaults.suffix = '_swapped_image';
	
	$('div#navigation_container img.myswap').canvasSwap();

});

<img src="myimage.png" alt="myimage" class="myswap" width="300" height="225"/>

Options

Suffix

(string) - DEFAULTS TO: '_over'

Suffix for your swap image.
eg: Current file is: my_image_1.jpg. Swap file is: my_image_1_hover.jpg. Suffix will be: _hover.

$.fn.canvasSwap.defaults.suffix = '_hover';

IE6 PNG Support

(boolean) - DEFAULTS TO: false

In order for this script to work properly you must have a PNG transparency script installed. I recommend including "pngFix" ( by Andreas Eberhard - http://plugins.jquery.com/project/pngFix), but it's entirely up to you.

$.fn.canvasSwap.defaults.ie6_support = true;

Considerations

Preloading Images

It is recommended that you install an image preload plugin such as "Preload 1.0.8".

IE6 PNG Support

IE 6 PNG support has a difficult time with images over 1000px.

Image Sizes

This plugin currently supports images with different dimensions only if width and height are not specified.

<img src="myimage.png" alt="myimage" class="myswap" />

If you specify image dimensions on an image then induce an image swap on an image that is not the same dimensions as the orginal, it will be scaled up or down to fit the original image's dimensions.

This will be fixed in version 1.1

Image Extensions

Currently this plugin only supports images of the same extension. Meaning there can be an original image with a .png extension and the swap image needs to be the same extension. You can have any extension you would like throughout the code, but the image's swap file must be the same extension. This is by design for ease of use.

The option to either specify the images you are going to swap, or let image swap define that for you will be made available in version 1.1

Demo

Demo 1

Swapping two .jpg files with the class of elephant, and a suffix of '_hover'.

$(document).ready(function(){

	$.fn.canvasSwap.defaults.suffix = '_hover';

	$.fn.canvasSwap.defaults.ie6_support = true;

	$('img.elephant_swap').canvasSwap();

});

<img src="images/elephant.jpg" class="elephant_swap" alt="elephant" width="306" height="423"/>

Demo 2

Swapping two transparent .png files with the class of giraffe_swap, and a suffix of '_hover'.

$(document).ready(function(){
	
	$.fn.canvasSwap.defaults.suffix = '_hover';
	
	$.fn.canvasSwap.defaults.ie6_support = true;

	$('img.giraffe_swap').canvasSwap();

});

<img src="images/giraffe.png" class="giraffe_swap" alt="giraffe" width="400" height="320"/>