Image Rollovers Without Inline HTML Markup

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

Example Rollovers

Lilian & Marcel Trost

Mom & Dad 1978

Jim & Gloria

Gloria and Jim

John McDermott – When You And I Were Young, Maggie   Lyrics

Tony Bennett – The Shadow Of Your Smile (Short version)   Lyrics

Jim 1986 and 1945

Age 43 and Age 2

Jim 2023 and 1986 Age 80 and 43

Jim 1945 and 2023 Age 2 and 80

1967 Gold $20


Flips between Obverse (heads) and Reverse (tails)

Once A Lion Always A Lion

Hover over the image to view the other Lion

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 (the coin flip seems useful). It should be noted that the images to be flipped need to be the same dimensions or undesirable results are produced. Different sized images create confusing and jumping page content. As this file demonstrates.

As you can see any image may be used to flip, not restricted to coins or geometric objects. Hovering over the images above flips between me and Gloria, using the simple hover image flip technique. Not earth-shattering but useful for demonstration purposes.

See RollOver.html and RollTide.html for demonstration of more features.

Elvis Presley – American Trilogy  –  Lyrics