De 'tooltip' - deel 1 (javascript)
De 'tooltip' is een soort pop-up venstertje met extra informatie. Je krijgt het te zien als je in de bron het title-attribuut toevoegt aan het a-element (= hyperlink).
Voorbeeld:
<A href="#" title="Ben benieuwd">Even kijken</A>
Ga maar met je muis over het zinnetje hieronder:
Even kijken
Als je dus met de muisaanwijzer boven een aanklikbaar element komt en er staat een title-attribuut in de broncode, dan komt er een tekstvakje zoals hierboven tevoorschijn.
Het lijkt op het alt-attribuut dat normaal aan het img-element (= afbeelding) wordt toegevoegd. Het is niet hetzelfde. Het title-attribuut is bedoeld om additionele informatie te geven en het alt-attribuut wordt gebruikt om alternatieve informatie te geven.
* * *
Als je de standaard tooltip niet zo interessant vindt, kun je ook een javascriptje gebruiken. Download eerst het wz_tooltip.js-bestand. Te vinden op de site van Walter Zorn en zet het in dezelfde map als je HTML-pagina. Daarna plak je deze regel tussen de body-tags:
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
Het liefst helemaal onderaan, vlak voor de eind-body-tag.
De HTML-code is als volgt:
<A href="http://www.home.deds.nl/~mvdklugt" target="_blank" onmouseover="return escape('Een tutorial over het gebruik van de Texturizer Filter in beeldbewerkingsprogramma Paint Shop Pro')">Texturizer Filter</A>
Beweeg je muis maar over de hyperlink hieronder:
Texturizer Filter
* * *
Een afbeelding in de tooltip behoort ook tot de mogelijkheden:
De HTML-code:
<A href="http://www.walterzorn.com/tooltip/tooltip_e.htm" target="_blank" onmouseover="return escape('<img src=\'v70.gif\' width=\'50\' align=middle> Tekst bij het plaatje.')">Walter Zorn</a>
Hou de muis even boven onderstaande hyperlink:
Walter Zorn
Nog leuker zou het zijn als er een script bestond waarmee je de kleuren van de tooltip kunt aanpassen. En natuurlijk bestaat zo'n script. Zie deel 2 van deze tutorial.
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal