Beschrijving: Met CSS, Cascading Stylesheets zijn fraaie effecten te bereiken. Deze serie pagina's die horen bij de sectie Webontwerp, geeft een aantal voorbeelden daarvan. Specifiek betreft deze pagina het simuleren van een pop-up die in de plaats komt van de standaard tooltip. Zo'n pop-up geeft een grote vrijheid voor het bepalen van het uiterlijk. Trefwoorden: HTML, CSS, Cascading Stylesheets, tooltip, tool tip, pop-up, popup.
Blijf op de hoogte van wijzigingen aan PretLetters site: abonneer je op PretLetters Actueel, een RSS Feed met de laatste nieuwtjes.
voorbeelden
[Alt]+ gaat naar
Accesskeys
S Sla sectienavigatie over
0 CSS voorbeelden
1 twee kolommen
2 centreren content
3 verticaal centreren
4 menu's met effecten
5 frames simuleren
6 tabellen
7 news alert
8 pop-up's
9 testpagina's

Pop-up in plaats van Tooltip

Met een klein stukje CSS Cascading Stylesheets: Stijlbladen, die cumulatief verschillende stijlsuggesties voor html-pagina's bevatten. Met CSS doe je als auteur voor het www suggesties voor de opmaak van je pagina's.

De meeste mainstream, grafische browsers zullen deze suggesties overnemen en de pagina's renderen zoals de webauteur dat heeft voorgesteld.
CSS kan je een informatieve pop-up simuleren, als een bezoeker met de muis over een hyperlink beweegt of een ander stukje tekst waarbij je een popup wilt laten verschijnen.

Stijlblad Stijlblad Stijlblad bij Popup Dit is het stijlblad bij het voorbeeld over popups voor hyperlinks.
Tot nu toe heb ik dit wel werkend gekregen voor Mozilla-browsers, maar in Internet Explorer werkt het (nog) niet.

Een nadeel is, dat deze methode niet werkt in Internet Explorer; vooralsnog heb ik het daar althans niet werkend gekregen.

Om die reden heb ik voor IE het title attribute in ere gehouden. Wel is het dan nodig om de titles te verbergen voor niet-IE browsers, omdat die anders de pop-up zou overlappen. Dat is hinderlijk.
In het stijlblad wordt bepaald dat alle elementen met class="ie" worden verborgen. In de kop van deze pagina wordt juist aan IE uitgelegd, dat ze alles met een class="ie" gewoon moeten laten zien, maar alles met een class="noie" moeten verbergen.

Misschien een niet zo fraaie hack, maar zolang IE clueless blijft op het gebied van hover, is dit even noodzaak.

Check ook even de Test directory. Daar bevinden zich verschillende test- en voorbeeldpagina's waarvan er sommige relevant kunnen zijn bij het onderwerp van deze pagina.

Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,