hotspot - beschrijving link ergens anders

Status
Niet open voor verdere reacties.
L

livinus

Nieuwe gebruiker
Lid geworden
22 feb 2007
Berichten
3
Ik zou een foto op mijn site willen waarop ik hotspots aanbreng. De bedoeling is dat, wanneer de gebruiker met de muis over een bepaalde hotspot komt, ergens anders (op een vaste plaats) een woord met de beschrijving van de link komt. Ik ben niet helemaal zeker of dit wel met Javascript moet, maar ik vermoed dat dat er wel iets mee te maken zal hebben. Kan iemand uitleggen hoe dat moet?

Bedankt,
livinus
 
Dit is het makkelijkst te maken met behulp van een zogenaamde "image map". Het werkt op de volgende manier:

Eerst voeg je het usemap attribuut toe aan de img tag, dus zo:
<img src="afbeelding.gif" usemap="#mapnaam" />

Daarna maak je het map element aan:
<map name="mapnaam"></map>

Zet dan de gebieden, of zoals jij ze noemt, hotspots, in de inhoud van het map element. Dit doe je met het area element. Om een gebied te maken heb je drie mogelijkheden

- Een rechthoek, dan neem je voor het shape attribuut de waarde rect. De opbouw van de waarde voor het coords attribuut ziet er dan als volgt uit: 20, 20, 50, 50, waarbij het eerste getal (20 in dit geval) de x-positie van de linker bovenhoek van de rechthoek, het tweede getal (20 in dit geval) de y-positie van de linker bovenhoek van de rechthoek, het derde getal (50 in dit geval) de x-positie van de rechter onderhoek van de rechthoek en het vierde getal (50 in dit geval) de y-positie van de rechter onderhoek van de rechthoek is. De area tag ziet er dan zo uit:
<area shape="rect" coords="20, 20, 50, 50" href="#" />

- Een veelhoek, dan neem je voor het shape attribuut de waarde poly. Voor het coords attribuut kunnen oneindig veel waarden worden opgegeven, steeds in groepjes van twee. Een voorbeeld van de waarde van het coords attirbuut is de volgende: 20, 20, 30, 40, 10, 50 Hierbij wordt het gebied een veelhoek met drie hoeken met de coördinaten: (20, 20), (30, 40) en (10, 50). Het eerste getal is steeds de x-positie en het tweede getal de y-positie. De area tag ziet er dan zo uit:
<area shape="poly" coords="20, 20, 30, 40, 10, 50" href="#" />

- Een cirkel, dan neem je voor het shape attribuut de waarde circle. De opbouw van de waarde voor het coords attribuut ziet er dan als volgt uit: 20, 30, 10, waarbij het eerste getal (20 in dit geval) de x-positie van het middelpunt van de cirkel, het tweede getal (30 in dit geval) de y-positie van het middelpunt van de cirkel en het derde getal (10 in dit geval) de straal van de cirkel is. De area tag ziet er dan zo uit:
<area shape="circle" coords="20, 30, 10" href="#" />

De totaalcode zou er dan als volgt uit kunnen zien:

HTML: 
<img src="afbeelding.gif" usemap="#mapnaam" />

<map name="mapnaam">
<area shape="circle" coords="20, 30, 10" href="#" />
<area shape="circle" coords="50, 30, 10" href="#" />
<area shape="circle" coords="30, 60, 10" href="#" />
</map>

Je hebt nu 3 gebieden in de vorm van een cirkel en met een straal van 10 pixels die je kunt gebruiken als hotspots. Je moet er nu het onmouseover en het onmouseout attribuut in gaan zetten:

HTML: 
<img src="afbeelding.gif" usemap="#mapnaam" />

<map name="mapnaam">
<area shape="circle" coords="20, 30, 10" href="#" onmouseover="showdiscription(1);" onmouseout="hidediscription(1);" />
<area shape="circle" coords="50, 30, 10" href="#" onmouseover="showdiscription(2);" onmouseout="hidediscription(2); />
<area shape="circle" coords="30, 60, 10" href="#" onmouseover="showdiscription(3);" onmouseout="hidediscription(3); />
</map>

Je ziet dat elk gebied een nummer krijgt. Hiermee kun je verschillende beschrijvingen weergeven en verbergen. Nu komt het javascript die de beschrijvingen laat zien en verbergt. Dit script zet je ergens in de inhoud van het head element:

HTML: 
<script type="text/javascript">

showdiscription(id){
	document.getElementById("discription" + id).style.display = "block";
};

hidediscription(id){
	document.getElementById("discription" + id).style.display = "none";
};

</script>

Nu zet je ergens in de pagina de beschrijvingen neer:

HTML: 
<div id="discription1" style="display: none;">
Dit is beschrijving nummer 1.
</div>
<div id="discription2" style="display: none;">
Dit is beschrijving nummer 2.
</div>
<div id="discription3" style="display: none;">
Dit is beschrijving nummer 3.
</div>


Als je alles goed hebt gedaan werkt het als het goed is. Succes! :thumb:
 
Beste Jeroen Noten,

Heel erg bedankt voor je hulp. Jammer genoeg heb ik vandaag geen tijd meer gehad om het uit te proberen, maar morgen zal ik je instructies zeker eens opvolgen. Hopelijk verloopt alles goed, en anders weet ik waar aankloppen, je lijkt hier veel van te weten.

Bedankt,
livinus





Ik vrees dat ik toch nog een probleem heb. Het aanduiden van de hotspots geeft geen problemen, maar als ik de webpagina uitprobeer komt de tekst niet tevoorschijn als ik over de hotspot ga. Ik heb de afbeelding in een cel van een tabel gestoken, en wil de tekst in de cel van een andere tabel laten verschijnen als je over de hotspot komt.

Heb ik iets fout gedaan? Hier is mijn broncode:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

showdiscription(id){
document.getElementById("discription" + id).style.display = "block";
};

hidediscription(id){
document.getElementById("discription" + id).style.display = "none";
};

</script>
</head>

<body>
<table width="750" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="top"><img src="Images/Groepsfoto/Groepsfoto.JPG" width="600" height="284" border="0" usemap="#Map" /></td>
<td><table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="196">&nbsp;</td>
</tr>
<tr>
<td height="74">
<div id="discription1" style="display: none;">
Dit is beschrijving nummer 1.
</div>
<div id="discription2" style="display: none;">
Dit is beschrijving nummer 2.
</div>
<div id="discription3" style="display: none;">
Dit is beschrijving nummer 3.
</div>
</td>
</tr>
</table></td>
</tr>
</table>

<map name="Map" id="Map">
<area shape="circle" coords="301,37,19" href="#" onmouseover="showdiscription(1);" onmouseout="hidediscription(1);" />
<area shape="circle" coords="337,44,18" href="#" onmouseover="showdiscription(2);" onmouseout="hidediscription(2);" />
<area shape="circle" coords="366,71,15" href="#" onmouseover="showdiscription(3);" onmouseout="hidediscription(3);" />
</map>

</body>
</html>




Als ik uit het javascript van de beschrijvingen style="display: none;" weglaat, komt de tekst wel degelijk op het scherm, maar dan blijft hij er dus altijd staan.

Hopelijk kan iemand me helpen,
livinus
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan