Hoi Jolanda,
De museum-site gebruikt géén
image-map (dan zou ook in de broncode de tag <area> moeten opduiken, en die staat er niet in), en is ook geen css-hover zoals in de link van Naarling beschreven staat.
Op de museum-site is met een derde techniek gewerkt: "javascript-rollovers", wat niet ideaal is.
En als ik de museum-site bekijk, dan is dat ook nog eens op een verschrikkelijk code-slurpende manier gedaan (waarschijnlijk door het gebruik van de Studio Webdesign-webeditor [alias "Serif WebPlus X4",
zie ook hier], die niet anders kan):
HTML:
<div style="position:absolute; left:555px; top:631px; width:106px; height:48px;">
<a onmouseover="PPImgAction('over','roll_5')" onmouseout="PPImgAction('out','roll_5')"
href="museum-stock.html"><img border="0" width="106" height="48"
alt=" Stock" title="" name="roll_5" id="roll_5" src="pl zaal a uit.jpg"></a>
</div>
<div style="position:absolute; left:637px; top:605px; width:113px; height:26px;">
<a onmouseover="PPImgAction('over','roll_6')" onmouseout="PPImgAction('out','roll_6')"
href="museum-thematentoonstelling.html"><img border="0" width="113" height="26"
alt="Zaal E: Thema tentoonstelling" title="" name="roll_6" id="roll_6"
src="http://www.reinoutk.nl/pl%20zaal%20b%20uit.jpg"></a>
</div>
<div style="position:absolute; left:615px; top:564px; width:91px; height:15px;">
<a onmouseover="PPImgAction('over','roll_7')" onmouseout="PPImgAction('out','roll_7')"
href="museum-nieuw-werk-1.html"><img border="0" width="91" height="15"
alt="zaal A: nieuw werk I" title="" name="roll_7" id="roll_7" src="pl zaal c uit.jpg"></a>
</div>
<div style="position:absolute; left:487px; top:584px; width:148px; height:41px;">
<a onmouseover="PPImgAction('over','roll_8')" onmouseout="PPImgAction('out','roll_8')"
href="museum-nieuw-werk-2.html"><img border="0" width="148" height="41"
alt="Zaal B: nieuw werk II" title="" name="roll_8" id="roll_8" src="pl zaal d uit.jpg"></a>
</div>
en nog 4
Op deze javascript-manier zijn er ontzettend veel images nodig: twee voor elk gekleurd museum-deel dat aangeklikt kan worden (keer 8 stuks), en één voor het totaal => 17 images die allemaal gedownload moeten worden.
Met de css-hover-manier is er maar 1 nodig: één gecombineerd image voor het totaal en voor alle hovers tegelijk.
De truc is dat het image als background-image geplaatst wordt en niet als voorgrond-img in de html, waardoor er makkelijk met de plek van het image geschoven kan worden om de verschillende onderdelen te tonen (zie:
de Patrijspoort-theorie).
En de html kan dan bv. worden:
HTML:
<ul id="zalen">
<li><a id="zaal1" href="zaal1.htm"></a></li>
<li><a id="zaal2" href="zaal2.htm"></a></li>
<li><a id="zaal3" href="zaal3.htm"></a></li>
<li><a id="zaal4" href="zaal4.htm"></a></li>
... en nog 4
</ul>
Meer niet!
In de css wordt dan de precieze plek van de oppervlakjes en de inhoud ervan geregeld. Dat wordt dan zoiets als:
Code:
#zalen {
...
width: 400px;
height: 300px;
background: url(images/zalen.png);
position: relative;
}
#zalen li {
...
}
#zalen a {
position: absolute;
display: block;
}
#zaal1 { top: 20px; left: 30px; width: 30px; height: 25px; background-position: -400px 0; }
#zaal2 { top: 30px; left: 65px; width: 20px; height: 35px; background-position: -400px -25px; }
#zaal3 { ... }
#zaal4 { ... }
#zalen a:hover,
#zalen a:focus {
background: url(images/zalen.png);
}
Keuze maken
Bij het maken van een keus voor 1 van de 3 technieken zou ik de javascript methode afraden.
Blijven over: de css-hover methode en de image-map methode. Wie van de twee hangt erg af van de afbeelding die je hebt en waar er precies gehoverd/geklikt moet kunnen worden:
- Als je van de afbeelding een tekening kunt maken waarop de te hoveren/klikken partjes allemaal als rechthoekjes kunnen worden getekend die elkaar niet overlappen, dan is de css-methode prima en heeft voordelen boven de image-map methode.
- Maar als de oppervlakjes hele grillige vormen hebben en/of elkaar overlappen (bv. een kaart van Nederland met alle provincies, die als puzzelstukjes in elkaar passen), dan zijn die rechthoekjes niet mogelijk, en zal je een image-map moeten gebruiken.
Met vriendelijke groet,
CSShunter
