jQuery voorbeeld:
Code: Selecteer alles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.debondt-lacres.net/sem/">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-Language" content="nl-be" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Retorica 1960</title>
<style type="text/css">
.style4 {
border: 4px solid #FF0000;
text-align: center;
background-color: #FFFF00;
}
.style5 {
border: 3px solid #FF0000;
text-align: center;
background-image: url('background/leaves.jpg');
}
.style13 {
text-align: center;
}
.style15 {
background-image: url('background/perkament.jpg');
}
.style16 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
color: #0000FF;
}
.style18 {
font-size: large;
color: #FF0000;
}
.style20 {
border: 1px solid #FF0000;
}
.auto-style1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: xx-large;
color: #800080;
}
.ui-widget-content{
background: rgba(100,105,110,0.97) none no-repeat top left !important;
color: #ddd !important;
}
</style>
<meta name="keywords" content="klein seminarie, mechelen, retorica 1960" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body style="background-color: #008080">
<table border="0" cellpadding="0" cellspacing="0" style="width: 1280px; height: 800px" align="center">
<!-- MSTableType="layout" -->
<tr>
<td colspan="2" style="height: 89px" class="style4">
<!-- MSCellType="ContentHead" -->
<span class="auto-style1" style="height: 60px">
<strong>Klein Seminarie Mechelen</strong></span><span class="auto-style1"> - <strong>Retorica 1960</strong> !</span></td>
</tr>
<tr>
<td valign="top" rowspan="2" style="width: 350px" class="style5">
<!-- MSCellType="ContentHead2" -->
<br /><br /><br />
<img alt="" src="background/vl_l.jpg" width="70" height="71" class="style20" /><br /><br /><br />
<span class="style16">
<a href="1.htm">Klasfoto's</a><br /><br /><br />
<a href="2.htm">Leraren</a><br /><br /> <br />
<a href="3.htm">Aandenken</a><br /><br /><br />
<a href="4.htm">Nostalgie</a><br /><br /><br />
<a href="5.htm">Sport - Spel</a><br /><br /><br />
<a href="6.htm">Muziek</a><br /><br /><br />
<a href="7.htm">Romereis</a><br /><br /><br />
<a href="8.htm">Retorica 60 in 2010</a></span><br /><br /><br /><br />
<img alt="" src="background/vl_l.jpg" width="70" height="71" class="style20" /></td>
</tr>
<tr class="style13">
<td valign="top" style="height: 636px; width: 1059px" class="style15">
<!-- MSCellType="ContentBody" -->
<br /><br /><map name="Reto60" id="Retorica">
<area id="_01" shape="circle" coords="561, 313, 31" alt="" title="Robert Ceulemans" />
<area id="_02" shape="circle" coords="265, 576, 40" alt="" title="Herman Cooreman" />
<area id="_03" shape="circle" coords="331, 98, 40" alt="" title="Paul Corstiëns" />
<area shape="circle" coords="209, 211, 29" alt="" title="Jozef De Boeck †" />
<area shape="circle" coords="907, 230, 39" alt="" title="Jan De Bondt (WEBMASTER)" />
<area shape="circle" coords="154, 195, 33" alt="" title="Frans De Bruyn" />
<area shape="circle" coords="376, 352, 32" alt="" title="Jozef De Groef" />
<area shape="circle" coords="265, 243, 33" alt="" title="Willy De Kelver" />
<area shape="circle" coords="291, 360, 32" alt="" title="Hugo De Meyer †" />
<area shape="circle" coords="726, 560, 38" alt="" title="Aloïs De Munter" />
<area shape="circle" coords="802, 543, 41" alt="" title="Karel De Smedt" />
<area shape="circle" coords="294, 447, 27" alt="" title="Tony Dieltiens" />
<area shape="circle" coords="84, 354, 33" alt="" title="André Geniets †" />
<area shape="circle" coords="807, 124, 44" alt="" title="Herman Heylen" />
<area shape="circle" coords="434, 392, 37" alt="" title="Henri Hofmans †" />
<area shape="circle" coords="684, 290, 33" alt="" title="Guido Jacobs †" />
<area shape="circle" coords="104, 230, 29" alt="" title="Johan Jacobs †" />
<area shape="circle" coords="813, 404, 26" alt="" title="André Jamaels" />
<area shape="circle" coords="832, 230, 37" alt="" title="Robert Michiels" />
<area shape="circle" coords="164, 470, 28" alt="" title="Luc Nijs †" />
<area shape="circle" coords="408, 504, 36" alt="" title="Gustaaf Peeters" />
<area shape="circle" coords="625, 126, 43" alt="" title="Marc Roels" />
<area shape="circle" coords="485, 331, 38" alt="" title="Albert Rosseels" />
<area shape="circle" coords="590, 264, 27" alt="" title="Stefaan Rubbens" />
<area shape="circle" coords="504, 420, 35" alt="" title="Jan Somers" />
<area shape="circle" coords="570, 482, 34" alt="" title="Jozef Vaeyens" />
<area shape="circle" coords="636, 463, 32" alt="" title="Guido Van Belle" />
<area shape="circle" coords="160, 358, 31" alt="" title="Albert Van Der Aa" />
<area shape="circle" coords="758, 395, 32" alt="" title="Jozef Van Diest" />
<area shape="circle" coords="51, 219, 32" alt="" title="Aimé Van Riet" />
<area shape="circle" coords="205, 314, 30" alt="" title="Roger Vander Eeckt †" />
<area shape="circle" coords="206, 108, 40" alt="" title="Fernand Verbaenen †" />
<area shape="circle" coords="740, 275, 25" alt="" title="Guillaume Verbeeck" />
<area shape="circle" coords="864, 397, 27" alt="" title="Edgard Verbist" />
<area shape="circle" coords="223, 441, 31" alt="" title="Guido Verbruggen" />
<area shape="circle" coords="98, 487, 32" alt="" title="André Waumans" />
<area shape="circle" coords="403, 247, 50" alt="" title="Karel Jespers †" />
</map>
<img src="pics/Reto60_tek.jpg" width="1000" height="690" alt="Retorica 1960" usemap="#Reto60" class="style20" />
<br />
<br />
<br />
<span class="style26"><a href="../index.htm">
<img alt="" src="pics/home.gif" width="80" height="28" /></a><br /><br />
<span class="style18">Bezoek ook eens volgende sites:</span>
<strong><a target="_blank" href="http://www.bimsem.be/">BIM - SEM</a> /
</strong><a target="_blank" href="http://www.sem65.be"><strong>Retorica1965</strong></a><a target="_blank" href="http://www.sem65.be" class="style28">
</a><br /></span><br /><br />
</td>
</tr>
</table>
<span class="style26"><br /><br /></span>
<div id="fichebaksken" style="display:none" >
<div id="persoon_01">
<img src="http://www.userbase.be/forum/images/avatars/ze0n_avatar.gif" /><br><br>
Dankzij Retorica 1960 staat hier geen andere onzin.
</div>
<div id="persoon_02">
<img src="http://www.userbase.be/forum/images/avatars/subzero_avatar.gif" /><br><br>
Userbase.be is the place to be.
</div>
<div id="persoon_03">
<img src="http://www.userbase.be/forum/images/avatars/nukem_avatar.gif" /><br><br>
Jawadde, wa voor nen tooltip is dadier?<br>
Tiet veur'n pafke...
</div>
</div>
<script>
$(document).ready(function(){
$("area").hover(function () {
var persoonID="";
persoonID = "persoon"+$(this).attr("id");
var areatitel=$(this).attr("title");
var fiche=document.getElementById(persoonID);
fiche.css="display:block";
$(this).tooltip({ track:true, show:false, hide:false , content: '<span style="float:right">' + areatitel + '</span><br>' + fiche.innerHTML });
return false;
});
return false;
});
</script>
</body>
</html>
Kopieer bovenstaande code in een tekstbestandje dat je opslaat als test
.html en dubbelklik dan op dat bestandje om te openen in je webbrowser. De apotheker bovenaan en de wiskundige onderaan de foto zijn voorzien van een tooltip, alsook een derde die je zelf moet vinden
In de "fichebakske" div kan je een fiche voor iedere persoon maken. Let wel op dat iedere fiche een id moet hebben die start met "persoon" en dan gevolgd door de id van het overeenkomstig area elementje. In bovenstaand voorbeeld heb ik de eerste 3 area elementjes een id gegeven (id="_01", etc.) en het tooltip scriptje onderaan zet er dan "persoon" voor, waardoor de tooltip het ficheke voor "persoon_01" toont.
Voor de styling van die tooltip heb ik al een aanzetje gegeven met een lichtjes transparante achtergrond:
.ui-widget-content{
background: rgba(100,105,110,0.97) none no-repeat top left !important;
color: #ddd !important;
}
De jQuery scripts en css moeten geïmporteerd worden om die tooltips te laten werken:
Deze scriptjes werken uiteraard enkel als javascript aanstaat in de webbrowser (en als er geen anti-script addons geïnstalleerd staan).
De base tag is gewoon om de URLs vanaf mijn computer te laten werken. Je mag deze lijn terug verwijderen als de pagina op de server gezet wordt:
Nota's:
-- in de namen heb ik de letters met accenten vervangen door hun overeenkomstige 'html-encoding' code omdat die tekens anders niet altijd juist verwerkt worden.
Hier is een link met de meestgebruikte vreemde tekens voor onze contreien:
http://html-codes.net/ascii/ascii-extended/ -- Kijk nog eens na of ik geen fouten maakte bij het omzetten van het 'overleden' symbool.
-- er zit geen error-handling in dat scriptje om de tooltip te tonen maar dat zou niet echt een probleem mogen zijn.
-- persoonlijke opmerking: javascript syntax en debugging is de hel op aarde.
