return to top of page

Image Rollovers Without Inline HTML Markup

Using non-obtrusive, standards compliant cross-browser code for
making image rollovers with ease.

Example Rollovers

Hover these (most basic usage): Simple Flip of image 1 to image 2 while mouse over image (hover)

hover test hover test hover test hover test hover test

Hover and click these: Mouse over flips to image 2, Click changes to image 3, mouse off image restores to original image

click test click test click test click test click test

Hover and click these, there is no restore: Hover changes to image 2, Click changes to image 3, NO restore to image 1

No restore No restore No restore No restore No restore

 

There is tremendous potential with this code, far beyond flipping a coin. When I get a chance or find a need for the features here, I will certainly make an effort to understand the code and make good use of it. It should be noted that the images to be flipped need to be the same dimensions or undesirable results are produced. Image naming Convention.

As you can see any image may used to flip, not restricted to coins or geometric objects. Hovering over the image below flips between Jim and Gloria, using the simple image flip demonstrated above. Not earth shattering but useful for demonstration purposes.
See RollTide and RollJimGlo demonstrating the flip technique as a practical application.

hover test
Cursor over this image flips image



Decorative Coaster

hover test
Cursor over this image flips image

Amazing how many homes have decorative coasters with an image
on one side and cork on the other side.

The cork side should have your drink on it.
The cork is there to soak up the dripping condensation.

The image is to be displayed only
when the coaster is used for decorative purposes.

NEVER put your drink on the decorative image side!

NOW YOU KNOW




Gloria Jim Gloria Jim

 

 

 

 

 

 

 

Click for larger image
Click for larger image



musical notes musical notes


Bill Anderson - Still  –  Lyrics





Return to Top of Page