Rollover Image with Animation

The above image was created in Adobe Image Ready, by first creating an animated GIF image for the changing of the lights from green to yellow to red.  Then, two new images were created, one for a more "brightly" glowing green light and one similarly for a more glowing yellow light.  These latter two images were saved in JPEG format purely for the sake of example although they again could've been saved as GIFs.

Next, using the two open JPEG images, the layer for one was shift-dragged onto the other image so as to create two layers in the same image.  Going to the Web palette, two states were created for Over and Click.  The Over state was established with the only visible layer being the image of the glowing yellow light.  The Click state was established with the only visible layer being the glowing green light.  The images were then saved in conjunction with the HTML coding for the rollover states, by using Save Optimized As...and selecting HTML with images.

To then incorporate the animation into the rollover, the HTML code was edited to substitute the name of the animated GIF file for the initially loaded JPEG and the JPEG that is referenced for the "onmouseout" state.  For convenience, the animated GIF image was named in the same format as the file names automatically created by ImageReady for the rollover state images, with the exception of the GIF file name extension.