Mouse over area in image.

Jan007 · 27 jan 2014, 15:33

Vraagje aan de web-specialisten:
Op volgende pagina van deze website zou ik graag een hedendaagse foto laten verschijnen van de persoon waar de pointer van de muis opstaat,
nu verschijnt er enkel de naam van de persoon.
http://www.debondt-lacres.net/sem/sem.htm
Is dit mogelijk?
De website is gemaakt met Microsoft Expression Web 4.

<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" />

Dit is een gedeelte van de html code.

Jan007 · 28 jan 2014, 12:45

Niemand die kan helpen

boran_blok · 28 jan 2014, 13:08

Ik denk dat je er wel kan geraken met javascript. OnMouseOver op die image and dan gaan checken en images gaan tonen etc.

Buiten die aanzet kan ik je niet veel helpen.

cptKangaroo · 29 jan 2014, 03:59

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 &#134;" />
<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 &#134;" />
<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 &#134;" />
<area shape="circle" coords="807, 124, 44" alt="" title="Herman Heylen" />
<area shape="circle" coords="434, 392, 37" alt="" title="Henri Hofmans &#134;" />
<area shape="circle" coords="684, 290, 33" alt="" title="Guido Jacobs &#134;" />
<area shape="circle" coords="104, 230, 29" alt="" title="Johan Jacobs &#134;" />
<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 &#134;" />
<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 &#134;" />
<area shape="circle" coords="206, 108, 40" alt="" title="Fernand Verbaenen &#134;" />
<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 &#134;" />
</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:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes ... ery-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>

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:

<base href="http://www.debondt-lacres.net/sem/">

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.

Code: Selecteer alles

Bijvoorbeeld: een ï wordt ï

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.

Jan007 · 29 jan 2014, 11:18

Dat ziet er goed uit maar ik krijg volgende melding in IE 11 dus telkens moet er op "allow blocked content" geklikt worden.

Capture.JPG

Trojan · 29 jan 2014, 13:16

Gebruik eens gewoon highslide.

http://highslide.com/

cptKangaroo · 29 jan 2014, 17:11

Ah, IE, we meet again...

Die "allow blocked content" melding is blijkbaar enkel voor html die vanaf de eigen computer geopend wordt -- er bestaat een workaround voor: Mark of the Web (Internet Explorer)

Dus plak de volgende code bovenaan je html pagina, net onder de "<!DOCTYPE html ..." lijn:

Code: Selecteer alles

<!-- saved from url=(0014)about:internet -->

Of er nog meldingen gaan gebeuren eens de pagina op de server staat, weet ik niet. Dat soort meldingen hangt ook af van de browser en instellingen van de gebruiker, en dat ga je dan vermoedelijk voor alle javascript oplossingen krijgen.

Jan007 · 30 jan 2014, 13:15

Eerst en vooral mijn dank aan cptKangaroo voor de hulp, ik heb mijn website aangepast maar het werkt niet zo vlot.
Er moet soms met de muis overdreven bewogen worden alvorens de foto verschijnt.
http://www.debondt-lacres.net/sem/sem.htm

30 jan 2014, 16:30

Jan007 schreef:Dat ziet er goed uit maar ik krijg volgende melding in IE 11 dus telkens moet er op "allow blocked content" geklikt worden.

Capture.JPG

Dat kan je vermijden door het protocol weg te laten in de links:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes ... ery-ui.css" /> wordt dan
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />

Op de achtergrond wordt http gebruikt indien je het aanroept via http en https als je het aanroept via https.
Zelf zou ik trouwens denk ik de popovers van Bootstrap gebruikt hebben ipv jQuery UI, maar goed, vele wegen leiden naar Rome

Jan007 · 30 jan 2014, 16:40

Meon,
De melding "allow blocked content" krijg ik niet meer door het toevoegen van lijn 2:

<!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">