jQuery RollOver Image Link Plugin

After listening to the .NET Rocks segment with Rick Strahl, I instantly found areas of my current project that could utilize jQuery. At the time I was building a forms control that utilized a LayoutTemplate and a DataPager similar to the new ListView Control. I decided to rewrite my rollover images using jQuery and found 3 main advantages in this project alone.

• Almost half the code in JavaScript and C#
• Allowed me to fade the images on rollover without having to write custom fading javascript.
• I could use css style selectors instead of capturing and registering the controls ClientID on PreRender.

About the Plugin

The plugin, called the RollOverImageLink Plugin, requires the jQuery core file and a single javascript file, jquery.rollOverImageLink.js. A demo is available on my prorfolio website. The plugin was designed with the following features.

• Images are all preloaded.
• Fading in/out of the OverImage on rollover
• Disabled Image when image is in disabled state

Downloads

jQuery Core (plugin built on jquery-1.2.6.js)

jquery.rollOverImageLink.js

jQueryRolloverImageSample.zip

Using the Plugin

In order to use this plugin create an html page and attached the jQuery core javascript file and the jquery.rollOverImageLink.js file. The rollover image link is constructed with one hyperlink and 3 images.

<a href="#" title="Back" class="rollOverImageLink" disabled="disabled"><img
  src="images/back_over.png" class="overImage" /><img
  src="images/back.png" class="baseImage" /><img
  src="images/back_disabled.png" class="disabledImage" /></a>

<a href="#" title="Next" class="rollOverImageLink"><img
  src="images/next_over.png" class="overImage" /><img
  src="images/next.png" class="baseImage" /><img
  src="images/next_disabled.png" class="disabledImage" /></a>
You will also need the following CSS code to set the initial state of the images
.rollOverImageLink img { 
  border:0px; }

.rollOverImageLink .overImage, .rollOverImageLink .disabledImage { 
  display:none; }

.rollOverImageLink .overImage { 
  position:absolute; }

Known Issues
Below is a list of known issues with this plugin. Please post any thoughts or solutions to these issues in the comments section

Requires the overloaded disabled and enabled selectors to work with Firefox
Queues a fade loop when a user repeatedly hovers over and off of the link. I tried using the stop method on the animation, but it was stopping the fade feature for the remaining lifecycle of the page.
Disabled Images are set in the document ready state. Dynamically changing the disabled state of the link won’t change the image. In theory if its only loading the disabled image from load you would really need to preload the remaining images, but I plan to add this feature in future versions.
Disabled Images are set in the document ready state. Dynamically changing the disabled state of the link won’t change the image. In theory if its only loading the disabled image from load you would really need to preload the remaining images, but I plan to add this feature in future versions.