Websites met stijl

35. Afbeeldingen met hot spots

Na hoofdstuk 34 plaats ik af en toe een nieuw artikel over een onderwerp dat nog niet ter sprake is geweest.
Dit artikel is daarvan het eerste.

In dit hoofdstuk

Inleiding

Met 'hot spots' worden aanklikbare gebieden binnen een afbeelding bedoeld. Zo'n gebied bevat een hyperlink: als je erop klikt wordt de hyperlink geopend. Dat wordt gedemonstreerd in een aangepaste versie van de Apollowebsite. In eerste instantie lijkt er niets veranderd in de website. Maar let op:

In dit hoofdstuk leer je hoe je hot spots kunt aanbrengen aan de hand van de gewijzigde Apollo-website.

Area, map, usemap

Hot spots worden opgebouwd met de elementen area en map; en het attribuut usemap:

Het voorbeeld hieronder laat zien hoe het allemaal werkt:

Voorbeeld

De hot spots

figuur 1 - hot spots figuur 1 - hot spots Figuur 1 toont de hot spots, de plekken die als hyperlink werken: de rode cirkel is de hot spot voor Armstrong, de gele rechthoek die voor Collins en de blauwe veelhoek die voor Aldrin.

map en area

Map en area van de hot spots uit figuur 1 zien er zó uit: figuur 2: code voor map en area <map name="astronauten"> <area shape="circle" coords="98,195,78" href="armstrong.html"
title="Neil Armstrong - klik voor meer info" >
<area shape="rect" coords="159, 54, 254, 329" href="collins.html"
title="Mike Collins - klik voor meer info" >
<area shape="poly" coords="290,113,315,111,380,205,355,329,259,329,259,192" href="aldrin.html"
title="Buss Aldrin - klik voor meer info" >
</map>

Toelichting:

Usemap

De afbeelding met de hot spots heeft een attribuut usemap die verwijst naar de map met area-elementen,
in dit geval naar de map met de naam 'astronauten' (het #-teken geeft aan dat het om een id gaat): figuur 3: afbeelding met het attribuut usemap <img src="afbeeldingen/apollo.png" usemap="#astronauten">

Opmerking:

Bij het gebruik van hot spots

Gebruik

Hoe je aan de area-coördinaten komt

Hoe kom je aan de coördinaten van de hot spots die je gaat maken? Dat kan via je fotobewerkingsprogramma.

Open de afbeelding die je wilt voorzien van hot spots in dat programma en wijs met de muis de plek aan waarvan je de coördinaten wilt weten.
De coördinaten van de aangwezen plek staan meestal ergens boven of onder de afbeelding. (Bij Photofiltre in de onderbalk van het venster.) Schrijf ze op.

Valkuilen

Er zijn dingen waar je goed op moet letten bij het gebruik van hot spots:

De Apollo-website aanpassen

Hierboven staat alles wat je weten moet voor het gebruik van hot spots.
Bekijk eventueel ook de naslag over hot spots.

Misschien wil je de Apollo-website aanpassen, zodat die werkt met hot spots.

De html aanpassen

De afbeelding van de astronauten in de h1-kop is een achtergrondafbeelding (die staat aangegeven in het stijlblad).
In een achtergrondafbeelding kan je geen hot spots aanbrengen. We moeten dus de afbeelding van de astronauten in de h1-kop zetten. Zie figuur 4: figuur 4: de afbeelding in de h1-kop <h1><imgsrc="afbeeldingen/apollo.png"usemap="#astronauten">HET APOLLO-PROJECT</h1> (Je mag de afbeelding ook achter de tekst zetten, maar wel binnen de h1-kop)

Deze verandering moet je op alle pagina's van de Apollo website aanbrengen.

Het stijlblad aanpassen

Nu staat de afbeelding met de astronauten twee keer in beeld. Eén keer als achtergrondsafbeelding en één keer in de html. Die achtergrondafbeelding moeten we dus uit het stijlblad verwijderen.

Daarnaast klopt de lay out van de kop helemaal niet meer, omdat een 'gewone' afbeelding een andere opmaak vraagt dan een achtergrondafbeelding. Een achtergrondafbeelding staat achter de inhoud van het element en neemt zelf geen ruimte in. Een 'gewone' afbeelding neemt wel ruimte in.)
Er moet dus het een en ander worden aangepast in de lay out.

figuur 4: stijlregels h1 (ongewijzigd) 18h1 {
19margin: 40px 0 10px 0;
20font-weight: normal;
21color: white;
22text-align: right;
23background: url("../afbeeldingen/apollo.png") no-repeat left bottom;
24font-size: 3.17em;
25padding: 300px 0 6px 0;
26}
27
Stap 1: achtergrondafbeelding weghalen

Als je de website nu bekijkt, staat de foto van de astronauten veel te laag. Bovendien is de ruimte voor de titel nu te klein, die past niet meer op de regel. Dat komt omdat titel en de foto nu in dezelfde laag zitten, ze staan elkaar in de weg.

Stap 2: de afbeelding in de h1-kop absoluut maken

We gaan de foto in een aparte laag zetten door die absoluut te positioneren. Dan staat de foto de titeltekst niet meer in de weg.

Opmerking: de selector is h1 img, een afbeelding binnen h1. Met alleen img als selector worden ook eventuele andere afbeeldingen absoluut gemaakt.

Bekijk de gewijzigde website in de browser. De website is nu bijna goed; alleen verdwijnen de eerste letters van de titel achter de afbeelding.

Stap 3: de afbeelding in de kop achter de titel.

We gaan daarom de afbeelding naar achteren zetten door op regel 27 z-index: -1; toe te voegen.

Als je de website bekijkt lijkt die helemaal goed.

Maar nu blijken de hot spots verdwenen! Er verschijnt geen handje meer bij aanwijzen.
Dat komt omdat de afbeelding nu achter de (padding van de) titel staat. Het is niet meer de bovenste laag.

Stap 4: de padding van de titel vervangen door een margin

We moeten dus de padding die de hot spots 'verbergt' weghalen.
Maar dan schuift alles 300px omhoog. Dat moet niet. Daarom maken we de topmargin 300px groter (van 40px naar 340px).

Dat levert bij bekijken een nieuwe verrassing op: doordat bovenmarge van de titel 300px groter is geworden, zijn de afbeelding met de astronauten en de titel 'bestemming maan' 300px omlaag geschoven.

Stap 5: de afbeeling van de astronauten 300px omhoog

We zetten de afbeelding van de astronauten 300px omhoog door top 300px kleiner te maken: van 0 naar -300px.

Hierdoor staat de afbeelding op zijn plaats en de hot spots werken.

Stap 6: de titel 'bestemming maan' 300px hoger

Nu moet alleen nog de titel 'bestemming maan' (h2) 300px omhoog. Dat doen we door de top van h2 300px kleiner te maken. Die top staat in regel 41.

Daarmee is de lay out van de gewijzigde webpagina's klaar.

In figuur 5 zie je hoe de h1 en h2 van het stijlblad er moeten uitzien.

figuur 5: stijlregels h1 en h2 (na de wijzigingen) 18h1 {
19margin: 340px 0 10px 0; /* gewijzigd */
20font-weight: normal;
21color: white;
22text-align: right;
23 /* verwijderd */
24font-size: 3.17em;
25padding: 0; /* gewijzigd */
26}
27h1 img { position: absolute; top: -300px; left: 0;} /* gewijzigd */
28h2 {
29position: absolute;
30width: 900px;
31height: 20px;
32margin: 0;
33padding: 0;
34color: hsl(28, 10%, 25%); color: hsl(28, 10%, 35%);
35font-size: 3.75em;
36font-weight: normal;
37text-align: right;
38transform: rotate(270deg);
39-ms-transform: rotate(270deg); /* IE 9 */
40-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
41top: 475px;/* gewijzigd */
42left: -160px;
43}

Opmerking Wat nog ontbreekt zijn de nieuwe pagina's met de gegevens over de astronauten: armstrong.html, collins.html en aldrin.html.
Je kan die natuurlijk zelf maken, maar daarvan leer je weinig nieuws.
Eventueel kun je de totale gewijzigde Apollo-website hier downloaden. Zie hieronder.

De gewijzigde website downloaden?

Als je wilt kun je de gewijzigde website ook downloaden. Je hebt dan alle bestanden kant en klaar.

De gewijzigde apollo-website is nu klaar voor gebruik.