CSS Image Gallery onclick

[jscheuer1]

This one has me stumped. In the CSS Image Gallery by Dynamic Drive:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

It says (emphasis added):


This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

How is that possible? CSS doesn't do onclick, or does it? CSS 3 perhaps?

In any case, this claim is not documented on the page and someone was asking about it. Anyone have a clue?

[molendijk]

There's no occurrence of onclick=.... The HTML-file only has href=..., which does not require javascript (enabled). Unfortunately, it is not explained how the css must be modified in such a way that the images are only enlarged when they are clicked on.
Arie.

Edit:
I found a solution. We should replace all occurrences of hover (in the css-file) with focus, see this thread (http://www.dynamicdrive.com/forums/showthread.php?70381-Clickable-Image-Gallery&p=280090#post280090).
===

[shad97]

I was able to get on click by changing hover to active in all instances of the css.

[shad97]

One thing I forgot to mention is the .thumbnail:active tag the image image will only stay visible while you are holding down the mouse button. If you have to have it stay visible until you click on it to make it disappear or to see another image then at the end of the CSS code you need to add:

.thumbnail:focus span {
visibility: visible;
}
Just above the </style> tag.