zudolab jqRollover

Simple usage

1. Load jQuery and "jqRollover.js"

2. Specify the img container elements' selector like following.

   new jqRollover("#headerNav a");
   new jqRollover("a.rollover");

3. Then this will attach rollover effects to following imgs.
   img src will be changed while mousehovering on the anchor.

   <ul id="headerNav">
       <li><a href="URL"><img src="/somedirectoryname/on/nav1.gif" /></a></li>
       <li><a href="URL"><img src="/somedirectoryname/off/nav2.gif" /></a></li>
       <li><a href="URL"><img src="/somedirectoryname/off/nav3.gif" /></a></li>
   </ul>
   <a href="URL" class="rollover"><img src="/somedirectoryname/off/nav1.gif" /></a>

   You need to put the rollover imgs under the specified direcotry like following.

   • /off/ (normal imgs)
     • 1.gif
     • 2.gif
     • 3.gif
   • /on/ (rolloverred imgs)
     • 1.gif
     • 2.gif
     • 3.gif

   "off" directory contains the normal imgs.
   "on" directory contains the rolloverred imgs.
   off - on img files are associated by its file name.
   You need to put each file into each directory as the same name.

   This rollover effect will set rollover event only to the imgs which contains "/off/" string in its src. Imgs which doesn't contain "/off/" string in the src will be ignored.

   note:
   You can enable all rollover imgs in anchor elements easily like following.

   new jqRollover("a");

   This is a easy way but I recommend you to specify the elements by using ID selector like following code because elementName selector will work much slower thatn ID specified selector.

   new jqRollover("#headerNav a");