CSS gone wrong - image dissapearing when clicking

Democrazy

09-18-2011, 07:23 AM

Hey guys,

I am trying to make a simple photo gallery.
I have come up with a concept that I am satisfied with, but having a minor problem with it.

Here is the code for it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<TITLE></TITLE>

<META content="charset=windows-1252;text/html" http-equiv="content-type">

<STYLE type="text/css">

IMG {

margin-left: 25%;

position: absolute;

visibility: hidden

}

A:focus IMG {

visibility: visible

}

</STYLE>

<DIV>

<A href="#show">1<IMG alt="" src="1.png"></A>

<A href="#show">2<IMG alt="" src="2.png"></A>

<A href="#show">3<IMG alt="" src="3.png"></A>

</DIV>

Here it is compiled with the 3 images in a zip file:
http://qfs.mobi/f31597

The images show up fine when an A link is toggled, however the problem lays with the image dissapearing when one clicks else where.

Does anyone know how this can be stopped?

ronaldroe

09-18-2011, 03:11 PM

I'm not going to download a zip file from some random url. Could you post the site somewhere?

Based on what I'm reading, you're wanting the image to persist after focus is removed from the element. You won't be able to do that with CSS. Reason being, once someone clicks elsewhere, the focus will be on that item. You'll have to do this with javascript.

Democrazy

09-19-2011, 07:10 AM

I'm not going to download a zip file from some random url. Could you post the site somewhere?

Whats wrong Ronald? Has your Norton Anti-Virus subscription ran out?

The file MD5 is: 2e441450d64839cd49fbbc309c0e76fe