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.
Advertisements

10 Responses to “jQuery RollOver Image Link Plugin”


  1. 1 mike September 22, 2008 at 11:04 am

    Thank you for the script!

    Seems to be the only legit one on the web right now.

  2. 2 Josh October 6, 2008 at 9:50 am

    Were you ever able to figure out how to resolve the queuing issue? I put a stop in, but as you indicated, it messes other things up.

    Thanks for a great script!

  3. 3 bendewey October 6, 2008 at 10:59 pm

    I haven’t found an fix for the queuing issue. I also haven’t looked too deep, i suppose we can overload the animation property to check for some unique task id. I’ll do some digging around

  4. 4 Josh October 21, 2008 at 12:52 pm

    Thanks for checking into it. I’m getting ready to re-devote some time to it, so I’ll let everyone know if I turn anything up.

  5. 5 bendewey October 21, 2008 at 3:55 pm

    Thanks Josh, let me know

  6. 6 miffo February 26, 2009 at 4:55 am

    jquery.rollOverImageLink.js – link is dead, can you fix it ? thanks

  7. 7 bendewey March 2, 2009 at 12:28 pm

    miffo,

    I just migrated my website to a new hosting provider. I’ve fixed that dead link. Thanks for the comment.

  8. 8 Peter August 20, 2009 at 12:54 am

    Thanks for the script Ben! Drove me nuts trying to fix the queuing issue, and no luck whatsoever. Not that big an issue anyway though. I also added this script to my page so that all rollovers will fire once the page has completed loading all images on the page:

    $(window).bind('load', function () {
        $('.rollOverImageLink').each(function (i) {
                $(this).find('.overImage').fadeIn('slow');
                $(this).find('.overImage').fadeOut('slow');
            }
    	);
    });
    

    Just a cool onload feature basically.

  9. 9 Guilletube February 5, 2010 at 11:51 am

    gracias por el script, lo probare en mi web saludos

  10. 10 David van Wert June 22, 2010 at 2:15 pm

    Unfortunately this doesn’t work with the latest jQuery. Too bad because it’s such a sweet, simple visual.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




What else am I doing?

StackOverflow Facebook Twitter LinkedIn Live

Twitter

Pages

July 2008
M T W T F S S
« Feb   Sep »
 123456
78910111213
14151617181920
21222324252627
28293031  

%d bloggers like this: