Een imagemap of klikkaart is een standaard afbeelding (jpg, gif of png) waarop bepaalde zones aanklikbaar worden gemaakt.

Transcriptie

1 Imagemaps Een image map bestaat uit een eenvoudige afbeelding (jpeg, gif...). Door bepaalde delen van de afbeelding aanklikbaar te maken, kan u bezoekers naar verschillende pagina's in de website doorsturen. Let op: gebruik image maps zinvol. Het heeft geen zin de hele navigatiestructuur van uw website te maken via image maps. Zinvolle toepassingen: een afbeelding van een huis met aanklikbare kamers een landkaart met aanklikbare provincies een groepsfoto's waarbij alle personen aanklikbaar zijn Hoe werken imagemaps? Een imagemap of klikkaart is een standaard afbeelding (jpg, gif of png) waarop bepaalde zones aanklikbaar worden gemaakt. 1. Voeg een foto in in de webpagina via de <img>-tag. <img src="groepsfoto.jpg"/> Opgelet: verander de afbeelding achteraf niet meer van grootte!!!! 2. Door de exacte coördinaten in te geven, kan u bepaalde zones aanklikbaar maken Bijvoorbeeld: Een afbeelding is 600 op 395 pixels. Als u een rechthoekige zone aanklikbaar wil maken, moet u de vier x- en y- coördinaten van de hoeken ingeven. pixel horizontaal pixel verticaal In HTML ziet dit er als volgt uit: <img src="groepsfoto.jpg" style="width:600;height:395;" usemap="#klikkaart" /> <map name="klikkaart" id="klikkaart"> coords="5,5,100,5,100,100,5,100" href="#" /> </map> Zoals u wellicht merkt, is de CSS-stijl hier als een attribuut opgenomen.

2 <img src="groepsfoto.jpg" style="width:600;height:395;" usemap="#klikkaart" /> U kan de breedte en de hoogte van de afbeelding ook op de traditionele manier ingeven: <img src="groepsfoto.jpg" width="600" height="395" usemap="#klikkaart" /> Maar u kan die informatie ook gewoon weglaten. <img src="groepsfoto.jpg" usemap="#klikkaart" /> De browser toont standaard toch het aantal beschikbare pixels. Een afbeelding van 600 pixels zal ook op 600 pixels worden weergegeven als u dit niet in de code opneemt. Bovendien heeft geen enkele zin om afbeeldingen met een hogere resolutie met width of height te gaan vergroten of verkleinen. Dit leidt enkel tot slechte kwaliteit. 4. Vervolgens moeten we de coördinaten toevoegen aan het HTML-document. Dit doen we met de <map>-tag. Bijvoorbeeld: <map name="klikkaart" id="klikkaart"> coords="5,5,100,5,100,100,5,100" href="#" /> </map> De kaart of map krijgt de naam en het id klikkaart. Met de <area>-tag stellen we een klikzone in. Natuurlijk kan u meerdere zones per kaart ingeven. Bovendien kan elke zone een verschillende vorm hebben. Standaard bestaan de mogelijkheden: circle, rect en poly. Circle vraag slechts drie coördinaten (middenpunt x en y + straal). Rect (rechthoek) vraagt vier coördinaten (x en y linkerbovenhoek; x en y rechteronderhoek). Een poly (veelhoek) vraagt een x- en een y-coördinaat voor elke hoek van de lijn. Natuurlijk kan u ook een poly-shape gebruiken voor een rechthoek, zoals wij in ons voorbeeld hebben gedaan. Vervolgens moeten de <map> koppelen aan de afbeelding. Dat doen we door aan de <img>-tag het attribuut usemap="#klikkaart" toe te kennen. <img src="groepsfoto.jpg" usemap="#klikkaart" /> De volledige HTML-code ziet er als volgt uit: <img src="groepsfoto.jpg" usemap="#klikkaart" /> <map name="klikkaart" id="klikkaart"> coords="5,5,100,5,100,100,5,100" href="#" /> </map>

3 2. Klikkaarten bij elkaar klikken in Dreamweaver Natuurlijk zou het onbegonnen werk zijn om de coördinaten van imagemaps manueel in te geven en uit te zoeken. Programma's zoals Adobe Photoshop (maar niet CS2 en later), Fireworks (niet: Firefox!), Dreamweaver, Gimp enz. bieden gereedschappen om imagemaps op gebruiksvriendelijke wijze aan te maken. Image maps maken in Dreamweaver 1. Maak een nieuwe HTML-pagina in Dreamweaver aan. 2. Bewaar de pagina. 3. Voeg een foto in. 4. Laat Dreamweaver de foto kopiëren naar de map Images. Als die map in uw sitestructuur nog niet bestaat, moet u die eerst aanmaken. 5. Selecteer empty bij Image Tag Accessibility Attributes.

4 6. Kies Draw Rectangle Hotspot. 7. Sleep een rechthoek over het deel van de afbeelding dat u aanklikbaar wil maken.

5 8. Voer onderaan de webpagina in waarnaar de aanklikbare zone verwijst. 9. Voer een zinvolle tekst in bij Alt. Bijvoorbeeld: Ga naar de kinderkamer. Dit Alt-attribuut tootn een gele tooltip wanneer een bezoeker met zijn muis over dit deel van de afbeelding beweegt. Jammer genoeg werkt Alt enkel in Internet Explorer. 10. Selecteer het Alt-attribuut in de HTML-code in het Code-venster.

6 11. Vervang alt door title. 12. Naast rechthoekige klikzones, kan u ook ronde zones kiezen. Met het polygone gereedschap kan u zelfs veelhoeken vormen. 13. Vergeet niet telkens het alt-attribuut te vervangen door title.

7 3. Klikkaarten en Javascript Wanneer u op een aanklikbare zone klikt, gaat u naar de daaraan gekoppelde link. Zinvol kan ook zijn om de gebruiker meteen al wat informatie te geven wanneer hij of zijn met de muis over een zone beweegt. Dit kan je echter niet met HTML. Hiervoor moeten we een beroep doen op Javascript. Op vindt u een volledige stoomcursus Javascript. We gaan de scriptingtaal hier dan ook niet volledig uitleggen. Met Javascript kan u de onderdelen van de webpagina interactief laten reageren op gebeurtenissen (events) die zich in het browservenster voordoen. Onder gebeurtenissen verstaat men gebruikersinteracties zoals: ergens overheen bewegen met de muis, een muisklik, het openen van het browservenster, bewegen met de muis... enz. Wanneer zo'n gebeurtenis plaatsvindt, schiet er een stukje Javascript in werking. Een vergelijking: Aan uw auto zitten zonder twijfel ruitenwissers. Standaard zijn die uitgeschakeld, maar u ziet ze wel. U kan door een trek aan de knop van de ruitenwissers het motortje van de ruitenwissers inschakelen waardoor ze beginnen bewegen. De gebeurtenis is hier het trekken aan de knop. U kan bovendien kiezen uit diverse snelheden of zelfs uit intervallen. Natuurlijk zou het ook kunnen dat u ruitenwissers heeft die met behulp van een sensor een bepaalde gebeurtenis afwachten. Wanneer er regen op valt, zet de sensor de ruitenwissermotor in gang. Hoe harder het regent, hoe sneller het interval van die motor... In Javascript heet een sensor een event listener (een gebeurtenis-luisteraar). Een event listener programmeren is niet meteen voor beginners weggelegd. Een simpele muisgebeurtenis registreren en een eenvoudig Javascript-motortje schrijven ligt echter wel binnen de mogelijkheden. 1. Voeg een afbeelding toe aan de webpagina. Bijvoorbeeld een groepsfoto. 2. Maak van de afbeelding een imagemap met aanklikbare zones. 3. In de HTML-code verschijnen de zones in de volgorde waarin u ze heeft aangemaakt. Bijvoorbeeld: <img src="groepsfoto.jpg" alt="groepsfoto" width="600" height="395" border="0" usemap="#map" /> <map name="map" id="map"> coords="120,58,101,95,48,143,9,217,36,300,65,343,57,397,146,395,147,294,14 4,228,157,184,163,156,178,138,201,127,200,121,167,91,153,63" href="#" alt=""/> coords="151,383,158,293,154,213,164,165,182,135,204,128,218,82,231,74,256, 74,268,96,260,138,279,163,281,187,269,252,281,243,273,278,261,301,275,360, 250,383,251,393,152,393" href="#" onmouseover="info('anja Willems');"/> coords="363,393,371,259,380,185,382,133,382,113,344,72,319,49,297,58,294,9 6,269,119,273,149,274,238,281,260,265,299,273,397" href="#"/> coords="375,384,385,243,378,198,384,156,386,112,402,78,425,86,441,133,451, 142,457,204,464,266,458,311,469,367,467,382,450,396,402,396,401,409" href="#"/> coords="476,392,461,311,463,217,468,181,448,150,456,100,487,78,534,106,548,142,584,174,593,250,584,329,561,353,560,389" href="#"/>

8 </map> 4. Let op: in plaats van een link naar een andere webpagina tikken we een #-teken bij het href-attribuut. Bijvoorbeeld: coords="375,384,385,243,378,198,384,156,386,112,402,78,425,86,441,1 33,451,142,457,204,464,266,458,311,469,367,467,382,450,396,402,396, 401,409" href="#"/> 5. In de div info moet informatie over de zone verschijnen wanneer de gebruiker met zijn muis over de zone beweegt. Die gebeurtenis heet in Javascript onmouseover; 6. We aan elke area voegen we nu een lijntje Javascript toe (inline javascript). coords="375,384,385,243,378,198,384,156,386,112,402,78,425,86,441,1 33,451,142,457,204,464,266,458,311,469,367,467,382,450,396,402,396, 401,409" href="#" onmouseover=""/> 7. Opgelet: er gebeurt op dit moment nog niets. We hebben immers nog niet verteld wat er moet gebeuren. 8. Javascript heeft een aantal ingebouwde motortjes (functies). Een van die motors die vaak gebruikt wordt om te controleren of de webmaster geen fouten in zijn Javascriptcode heeft ingetikt, is alert();. Tussen de haakjes van alert() geeft u een parameter mee, nl. datgene waarvoor gewaarschuwd moet worden. Een voorbeeld maakt het duidelijk: alert("u beweegt met uw muis over een afbeelding van een kat"); In ons geval zou de code er als volgt moeten uitzien: coords="375,384,385,243,378,198,384,156,386,112,402,78,425,86,441,1 33,451,142,457,204,464,266,458,311,469,367,467,382,450,396,402,396, 401,409" href="#" onmouseover="alert("u beweegt met uw muis over een afbeelding van een kat");"/> MAAR: dit zal resulteren in een foutmelding. Javascript vraagt dat je parameters tussen dubbele of enkele aanhalingstekens plaatst. Een eerste keer dat het dubbele aanhalingstekens tegenkomt, weet Javascript dat de parameter begint. Wanneer Javascript nogmaals eenzelfde aanhalingsteken tegenkomt, denkt het dat de parameter wordt afgesloten. onmouseover="alert("u beweegt met uw muis over een afbeelding van een kat");" Kan u niet meer volgen? Geen probleem. We kunnen dit ook oplossen zonder dat u dit volledig begrijpt.

9 We kunnen 2 dingen doen: onmouseover="alert('u beweegt met uw muis over een afbeelding van een kat');" of onmouseover='alert("u beweegt met uw muis over een afbeelding van een kat");' 9. Natuurlijk is het de bedoeling dat u bij elke area een andere waarschuwing geeft. U vervangt dan gewoon de tekst U beweegt met uw muis over een afbeelding van een kat. Blijf echter letten op de aanhalingstekens of weglatigstekens! 10. Toch is een alert niet meteen de meest aantrekkelijke of gebruiksvriendelijke manier om de bezoeker informatie te geven. Veel mooier is om de waarschuwing om te toveren in een gewone boodschap... in echte informatie. 11. Boven de afbeelding maken we nu een lege <div>-tag aan. We geven de <div> het id info. Bijvoorbeeld: <div id="info"></div> <img src="groepsfoto.jpg" alt="groepsfoto" width="600" height="395" border="0" usemap="#map" onmouseover=""/> Vervolgens moeten we een eigen Javascript-motortje schrijven ter vervanging van de standaard aanwezige alert()-functie. 13. Hiervoor moeten we naar de head-sectie van ons HTML-document. We tikken daar de volgende regels in: <script type="text/javascript"> </script> 14. Tussen de begin- en eindmarkering van <script> gaan we nu onze eigen (eenvoudige) Javascript-motor bouwen. <script type="text/javascript"> function info(){} </script> 15. Een motortje in Javascript heet een function. De code begint met function gevolgd door de naam die je aan de functie wil geven. Achter de naam plaatsen we een open- en een sluithaakje. Achter de haakjes komen nog twee akkolades. Tussen deze akkolades komen de instructies (=wat er moet gebeuren). 16. In het voorbeeld van de ruitenwisser kon de bestuurder verschillende snelheden of

10 intervallen aan de ruitenwissermotor doorgeven. Dit is de parameterwaarde. In ons geval moeten we geen snelheid doorgeven als parameter, maar de tekst die moet worden weergegeven. We geven deze tekst een naam. We noemen de tekst simpelweg t. Maar u kan hem evengoed mijntekst noemen. Let wel op dat u enkel letters gebruikt, geen vreemde tekens en zeker geen spaties. Om problemen te voorkomen, gebruikt u best ook benamingen in het Nederlands. De function info() wordt niet alleen gestart, maar krijgt ook een parameter binnen. Natuurlijk moet de motor de parameters kunnen ontvangen en ook nog weten wat hij er mee moet aanvangen. De parameter ontvangen: function info(t){} Een instructie uitvoeren op basis van de parameter: function info(t){ //hier komt onze instructie op basis van t } Alles wat u achter een dubbele plaats, wordt door Javascript niet bekeken. De programmeur kan die dubbele streep gebruiken om er commentaar achter te schrijven zodat hij zijn code achteraf zelf nog begrijpt. 17. We willen de tekst met de naam t laten verschijnen in de div met id info. 18. Met Javascript kan u de inhoud en zelfs de HTML-inhoud van een div wijzigen. Hiervoor beschikt Javascript over een zeer krachtige methode om bepaalde onderdelen van een webpagina te selecteren en te wijzigen: de DOM (het document object model). In mensentaal is de DOM eigenlijk niet meer dan de stamboom van een webpagina. Wanneer u de div met id info wil selecteren, doet u dit als volgt: document.getelementbyid("info").innerhtml Let op: de hoofdletters zijn belangrijk! 19. In de div info zat nog geen inhoud. Maar zelfs al stond er iets in... dan werd de volledige inhoud van die div nu vervangen door de waarde van t. function info(t){ document.getelementbyid("info").innerhtml=t; } 20. We zijn bij onze laatste stap gekomen: we moeten ervoor zorgen dat de function info() wordt uitgevoerd wanneer de gebruiker met zijn muis over een aanklikbare zone beweegt.

11 In het voorbeeld hebben we voor de duidelijkheid een boek coördinaten weggelaten: <img src="groepsfoto.jpg" alt="groepsfoto" width="600" height="395" border="0" usemap="#map" /> <map name="map" id="map"> coords="120,58,101,95,48,143,9,217" href="#" onmouseover="info('anja Willems');"/> coords="151,383,158,293,154,213,164,165" href="#" onmouseover="info('joske Janssens');"/> coords="363,393,371,259,380,185,382,133" href="#" onmouseover="info('marc Peters');"/> coords="375,384,385,243,378,198,384,156" href="#" onmouseover="info('lisa Smets');"/> coords="476,392,461,311,463,217,468,181" href="#" onmouseover="info('nathalie Imbruglia');"/> </map> De tutorial in beeld