Navigatie met Imagemaps hotspots Dreamweaver MX tutorial

Dreamweaver MX gratis online tutorial voor de beginners ...

Het geeft in zo'n geval vaak meer duidelijkheid dan tekst links.
De kaart hieronder is daar een goed voorbeeld van. Als de muis over de kaart gaat verschijnt de naam van het gebied en kan men deze aanklikken. Dat is handig... zo ziet men namelijk gelijk w´´r zo'n gebied ligt op de kaart ook al is deze niet gedetailleerd. Wel is het altijd handig een korte instructie te geven van wat de gebruiker moet doen! Bijv. "Klik op de afbeelding om..."

Hotspots, kaart van Nederland

En nu aan de slag met Imagemap en Hotspots

We openen de index-pagina, dan zien we de eerder gemaakte frameset. Met in het mainFrame de introductiepagina. Maar we willen de pagina natuurgebieden.htm zien en bewerken. Ga dan naar file ⇒ open in frame (wel met de muis eerst in het juiste frame klikken!) dan selecteren we de pagina natuurgebieden.htm en die opent zich in het frame. Als we de pagina buiten de frameset zouden openen hebben we straks een probleem met het kiezen van de target, die moet dan handmatig worden invoeren, en dat levert nog al eens fouten op!

In deze pagina heb ik al een afbeelding staan: de kaart van Nederland.
Op deze kaart wil ik regio's van Natuurgebieden aangeven. Daarvoor selecteren we eerst de afbeelding, vervolgens verschijnt onderin het Dreamweaver scherm bij Properties de keuze voor Hotspot/Imagemaps (met drie lichtblauwe icoontjes).

Properties ⇒ Hotspots/Imagemaps

Hotspot op de afbeelding maken

Deze zogenaamde Hotspots zijn gebieden die over de afbeelding heen gelegd worden. Als een losse laag die de gebruiker op zijn/haar scherm niet zal zien.

Selecteer één van de drie icoontjes om een Hotspot te maken op de afbeelding. De keuze is recht, rond of een vrije vorm. Met de vrije vorm kunnen gebieden worden getekend. Zoals het gebied "kennemerduinen" op deze kaart. Dit is een geselecteerde vrije vorm (te zien aan de puntjes op de rand van het gebied). Belangrijk is een vrije vorm te sluiten! Dat wil zeggen dat het begin en eindpunt elkaar raken, houdt de alt-toets ingedrukt op het moment dat vorm gesloten wordt! Anders blijft er een "draad" aan de tool hangen, waardoor we ongewild meer hotspot tekenen, dat is hoogst irritant!

Hotspots, Imagemap

Leuk! We hebben een hotspot... en nu?
Nu is het de bedoeling dat we deze linken aan een pagina die meer informatie geeft over deze regio! In dit geval Kennemerduinen.

Wederom bij Properties, selecteren we de bijbehorende pagina kennemerduinen.htm, de Target zetten we op mainFrame (daar willen we dat de browser deze pagina laat zien!) En bij Alt vullen we in: Kennemerduinen!
Waarom? Omdat de gebruiker, van de site, dan te zien krijgt over welke regio hij/zij de muis beweegt!

Voor het Waddengebied, heb ik voor de verandering eens wat cirkelvormige hotspots gebruikt. (De gebruiker ziet het toch niet!) We kunnen nu die vier afzonderlijke hotspots tegelijk selecteren en allemaal in één keer linken aan de pagina waddengebied.htm.

Conclusie: Hotspots of imagemaps gebruiken we als we binnen een afbeelding, in bepaalde gedeeltes links willen plaatsen. Willen we de hele afbeelding linken, dan selecteren we de afbeelding, en linken deze gewoon vanuit Properties ⇒ Link! Voor de hele afbeelding kunnen we ook Alt-tekst invoeren, maar die geldt dan vanzelfsprekend voor de hele afbeelding.

Als we nu de pagina opslaan, kiezen we File ⇒ Save frame. Dat is prima!

Waneer we DreamWeaver afsluiten vraagt deze of we ook de frameset willen opslaan!
Let op! We kiezen NEE!
Zouden we hierop JA antwoorden dan is de welkomst pagina in de index ineens Natuurgebieden geworden! Dat was niet de bedoeling! Door NEE te kiezen veranderen we dus niets aan de index.htm.