Image Mouseovers with YUI

Last Updated: Saturday, July 12th, 2008
Automatically setup image mouseovers quickly and easily. The script preloads the images and will also verify that the over state image is available before swapping.

A script that automates the process of mouseover images through the use of convention so no configuration is needed (of course you can configure it if needed). Above is an example of it in action.

Requirements

The automated mouseover script uses the YUI library and needs the YAHOO, Dom, and Event files. You can include them using the tag below
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
Download the mouseover script and include it on your page
<script type="text/javascript" src="/js/jp-mouseovers.js"></script>
Those are the only requirements.

How to Use

The simplest way to use this script is to set any image that should have a mouseover to the css class of “jp-mouseover“.  Then for the mouseover image name it the same as the off state image except with “_ov” just before the file extension. For example for the get ticket image above the off state file is”hmp_get_ticket_btn.gif” and the over state file is “hmp_get_ticket_btn_ov.gif”. That’s all there is to it.

Examples

View additional examples of the Image Mouseovers with YUI here.

Advanced Usage

There is are two ways to use the image mouseovers. The auto method, which will automatically search through the page looking for any images to set as mouseovers. Manually be passing an image or the Id or an image to the mousover.

Either method you choose can take an optional config object. If the config object isn’t passed in then the options within “JP.mouseover.config”, which is defined at the top of the jp-mouseovers.js file, will be used. If the “JP.mouseover.config” if the configuration item isn’t specified in the “JP.mouseover.config” then the default values will be used. The configuration section below provides details for each available option.

Auto Mouseovers

By default the script runs JP.mouseover.auto once the page is loaded, more often than not this will serve your purpose. If you don’t want it to run on page load you can either comment out or delete this line at the bottom of the jp-mouseovers.js file:
YAHOO.util.Event.addListener(window, ‘load’, JP.mouseover.auto);

If you want to run the auto mouseover function manually you can just call “JP.mouseover.auto()” the function takes an optional config object. The primary items of concern for the auto function in the config are:
  • css_mouseover_class - specifies the css class that should be looked for to determine if an image should have a mouseover state.
  • element_types - takes an array specifying which types of elements should be looked at for the mouseovers. This will generally just be “img” tags but could also include “input” tags.
  • root_node - an id of a dom element that limits where the script looks to find the images to apply the mouseover. If the mouseover images are only in one part of the page, then specifying this root element can speed up the initial processing time.
An example:
JP.mouseover.auto({
   css_mouseover_class: ‘mousover’,
   element_types: [‘img’, ‘input’],
   root_node: ‘top-nav’
})
That call to JP.mouseover.auto would apply the mouseover to all the img and input elements that have the class “mouseover” within the top-nav element.

Note: The auto function will pass the config object onto the main mouseover object, so the config options below should also be included in the config object passed to the auto function.

Manual Mouseovers

Applying the mouseovers manually has one primary advantage, it takes fewer resources as the script doesn’t have to search through the dom to find the elements with the specific class. The disadvantage of applying the mouseovers manually is that you need to know the specific element you want the mouseover applied to.

To create a mouseover manually use the following:
var my_mouseover = new JP.mouseover.Mouseover(el, config); The first arguement “el” is either the Id of or the actual dom element the mouseover should be applied to. The ‘config” is an optional argument that specifies additional configuration options the primary items of concern for the config are:
  • over_image_text - this is the text that will be appended just before the file extension to specify the name of the over image. If this value is “_ov” (the default) and the image off state file name is “button.jpg” the image over state file name would be “button_ov.jpg”.
  • show_broken_img - if this is “true” then the the mouseover image will be displayed even if it can’t be loaded, showing a missing or broken image. This should generally be “false” except for debugging or testing.
An example:
JP.mouseover.Mousover(‘home-button’, {
   over_image_text: ‘_hover’
})
That call to the JP.mouseover.Mousover would apply the mouseover to the image with an Id of ‘home-button’ and look for the mouseover image appending “_hover” before the file extension.

Configuration Options

The mousover is configured through the use of a config object. By default the script will look to use the JP.mouseovers.config object. To update the settings for all mouseovers the easiest way is to update the JP.mouseovers.config object at the top of the jp-mouseovers.js file. If different settings are needed for different mouseovers both the auto function and mouseover will accept a custom config object.

Configuration Attributes

Name Type Default Value Description
css_mouseover_class string jp-mouseover Specifies the css class that is searched for to determine if the element should have the mouseover functionality applied. Used only for the auto functionality.
element_types array ['img'] An array specifying which types of elements should be looked at for the mouseovers. This will generally just be the "img" tags but could also include "input" tags or any other elements that have a "src" attribute. Used only for the auto functionality.
over_image_text string _ov The text that will be appended just before the file extension to specify the name of the over state image. If this value is "_ov" and the image off state file name is "button.jpg" then the image over state file name would be "button_ov.jpg".
root_node string or dom element '' (an empty string) An Id or a dom element that limits where the script looks to find the images to apply the mouseover. If the mouseover images are contained in one section of the page, then specifying this root element can speed up the initial processing time by decreasing the number of elements that need to be compared. Used only for the auto functionality.
show_broken_img boolean false Determines if the over state image isn't found whether it should still attempt to display the over image or not. This should be false except for testing or debugging purposes.

Download

File File Type Description
jp-mouseovers.js Javascript The Javscript file containing the mouseover code.

Tested On

It should work on all the A browsers supported by YUI it has been tested specifically on the following browsers:
Firefox 2, 3
IE 6, 7
Safari 3 (on Windows)
Opera 9.5

License

This code is licensed under a BSD license. You can view the license here. In essence you are free to do what you want with the code.
blog comments powered by Disqus