1. Javascript-oplossing
Ja, als in het mondial-assistance voorbeeld. Alleen zijn de javascript-bronnen daar "vrij omvangrijk" (= staat bol van grote javascript-bestanden), en moet je flink zoeken naar waar 't staat.
Heb ik niet gedaan, want nog een andere/simpele in voorraad.
Je maakt met javascript een aan/uit schakelaar:
[JS]function toggleTips(n) { // wisselschakelaar
var e = document.getElementById(n);
if (e.style.display == 'block'){
e.style.display = 'none';
}
else e.style.display = 'block';
}
function hideTips(n) { // uitzetten
var e = document.getElementById(n);
e.style.display = 'none';
}
function showTips(n) { // aanzetten
var e = document.getElementById(n);
e.style.display = 'block';
} [/JS]
... en in de html zet je de info-tekst in een verborgen <div>, die door dat javascript aangedreven wordt (eerst de schakelaar-button, en daarna de verborgen <div>):
HTML:
<p><a id="tipslink" class="tipsbutton" href="#niks"
onclick="toggleTips('tips01'); return false;"
title="Klik tips aan of uit"><img src="/images/transp1x1.gif" width="44" height="21"
alt=""></a></p>
<div class="tips" id="tips01">
<a class="tipClose" href="#niks"
onclick="hideTips('tips01'); return false;"
title="Sluit tips"><img src="/images/transp1x1.gif" width="15" height="15"
alt=""></a><!-- het kruisje voor het uitzetten -->
<p>... hier de inhoud van de info ...</p>
</div>
(hier is de button een css-hover, d.w.z. een achtergrond-afbeelding)
- Dit script staat hier in werking (knopje Tips, helemaal bovenaan).
- Mocht de browser javascript uit hebben staan (of geen javascript kennen), dan wordt het info-blokje altijd weergegeven.
- Uitzetten kan door nog een keer op de Tips-knop te klikken, of door een klik op het kruisje. - Bij veel info kan het kruisje ook nog eens extra onderaan gezet worden; hoef je niet eerst te scrollen voor het uitzetten.
2. CSS-hover oplossing (css pop-up)
Een andere methode is een css-hover. Dan wordt het info-blokje alleen weergegeven als je met de muis op het "i" symbooltje gaat staan, of op een tekst "meer info", enz.
Voorbeeld staat
hier in werking.
Met vriendelijke groet,
CSShunter
