Hover and Click

Hover and Click

Test of the mouseover process to switch small graphics when you hover over a small png graphic. Then added click on the small graphic to expand a separate photo.

Clicking on the enlarged photo will return to the thumbnail version.

The technique uses id labeling for the individual photos (which in this demo page are all the same, but could be any photos.

Finally, clicking the expanded photo itself will return it to thumbnail size.

Test side-by-side possibility

As an early step, there was this animated GIF.

Hover over the red-arrow graphic to see the animated version. (GIF with 10 ms internal image delay).
I like the way this hover technique allows an animated GIF without having it "on" all the time while the page is active.
Converted with Imagemagic. Explanatory article.


© 2013 Algot Runeman - Shared using the Creative Commons Attribution license.
Source to cite: - filedate: