kevinandre

This class was inspired by a need to prove a concept to a client. It is a development of an effect that was found on a Flash website. The effect is simple. When a user hovers the mouse over an image, a specified text or image will be displayed over the image for a cool looking text/image hover effect.

The class allows the use of any specified text or image. The text should of course be a minimal length and the image should be a minimal size to allow a pleasing visual effect. See examples below. It is also possible to provide a class name to create user-specific styles.

MooImageHover is built using the MooTools 1.2b javascript framework. Include the mootools.js and mooimagehover.js files.

Organize the target image inside an identifiable element (e.g. DIV, TD, etc.). The effect is much better if the element has a defined height and width.

Initialize the class for each image where the hover should show.

	new MooImageHover($('image'), { text: 'Sample' });

Simple Text:
new MooImageHover($('image3'), { text: 'ka' });

Long Text with Link:
new MooImageHover($('image1'), { text: 'A Building in the Memphis Skies', textClass: 'text-class1', link: 'http://kevinandre.com/site/photography' });

Image with Link:
new MooImageHover($('image2'), { useImage: true, imageSrc: 'http://kevinandre.com/lib/img/examples/hoverdownload.gif', link: 'http://kevinandre.com/lib/img/examples/hoverimg2.jpg' });

• text

  The text that should be display on image hover

• textClass

  The css class to use to apply styles to the hover text.

• useImage

  Whether to use an image instead of text. The text above will be ignored. (Default: false)

• imageSrc

  The image to use when displaying an image.

• imageClass

  The css class to use to apply styles to the hover image.

• link

  The link to create for the hover.

• linkTarget

  The target for the link. If the link isn't provided, this option is ignored. (Default: _self)

This class was tested in:

• Safari 2.0+ (Mac)
• Firefox 2.0+ (Mac)
• Opera 9.0+ (Mac)
• Safari 2.0+ (Win)
• Firefox 2.0+ (Win)
• Opera 9.0+ (Win)

It should also be compatible with all browsers supported by MooTools 1.2b.

• Effect not properly rendered in IE6+