Pop-ups zonder JavaScript en zonder extra browser ? Ja dat is mogelijk, namelijk met behulp van CSS stylesheet en een beetje HTML of PHP.

De stylesheet:

.spiderpic {
position: relative;
z-index: 0;
}

.spiderpic:hover {
background-color: transparent;
z-index: 50;
}

.spiderpic span { /*CSS voor uitvergroting */
position: absolute;
background-color: #ffffff;
padding: 1px;
left: -1000px;
border: 1px #ffffff;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}

.spiderpic span img { /*CSS voor uitvergroting */
border-width: 0;
padding: 1px;
}

.spiderpic:hover span { /*CSS voor uitvergroting bij hover*/
visibility: visible;
top: 0;
left: 60px; /* horizontale offset positie */

}

De PHP code bijvoorbeeld …

$image_html = \’<a class=\"spiderpic\" href=\"\’.$db->getConfig(\’script_url\’).\’images/\’.$product->getImageFilename().\’\"><img src=\"\’.$db->getConfig(\’script_url\’).\’images/\’.$product->getImageFilename().\’\" width=\"75px\" vspace=\"15\" hspace=\"20\" border=\"0\" align=\"left\"/><span><img src=\"\’.$db->getConfig(\’script_url\’).\’images/\’.$product->getImageFilename().\’\" /></span></a><i>

Ga met de cursor over het plaatje. Het plaatje aan de linker zijde kun je vergroot zien als je met de muis er overheen zweeft. Je hoeft er niet op te clicken. Doe je dat wel dan opent zich een nieuwe browser.

In bovenstaande code komt dus 3 maal precies dezelfde afbeelding URL voor, namelijk die van de originele afbeelding.

Dit voorbeeld laat zien dat de afbeelding standaard met een breedte van 75 pixels wordt getoond. Als de muis er overheen zweeft, verschijnt er automatisch een popup met de originele afbeelding.  Op deze manier heb je dus geen thumbnail nodig. En geen JavaScript. Het is dus ook niet zo dat de afbeelding van 75 pixels dan ook minder kb-tjes groot is. Die behoudt natuurlijk zijn originele grootte.

Als de afbeelding grootte zo, zeg maar, binnen de 400×400 blijft, dan wordt voorkomen dat er te veel beeldscherm oppervlak in beslag wordt genomen door de fly-over pop-up. Nou ja, ‘t is maar een hint.

Dit werkt op ALLE browsers onder ALLE besturingsystemen. Mooi heh ?