Övningsuppgifter - klickbara bilder

Leta fram en bra bild att göra ett bildschema av - till exempel en gruppbild av hela familjen eller en bild av en gammal skolplansch med pistiller och bin och allt. Först och främst måste du nu troligen göra om bilden, så att den blir bra på en webbsida. Beskär bilden så att det väsentliga kommer fram och se till att storleken på bildfilen blir rimlig. Spara sedan bilden under nytt namn i hemsidans bildmapp.

Bestäm nu vilka delar som skall vara klickbara på bilden och hur stora de klickbara områdena skall vara. Se till att områdena inte överlappar varandra - du kan inte ha ett område som leder till två olika länkar. Skriv upp koordinaterna för de olika områdena och anteckna samtidigt vart varje område skall leda.

Observera att du inte skall sätta ut varken cirklar eller fyrkanter direkt på bilden. Den skall visas precis som den är - koordinaterna bestäms i bildschemats MAP-tagg och teoretiskt kan du använda ett och samma bildschema till många olika bilder.

När du är klar med koordinaterna för bildschemat gör du de olika sidor som länkarna skall leda till - om de leder till externa länkar behöver du naturligtvis inte göra de nya sidorna.

Nu har du allt du behöver: koordinater, anteckningar om vilka områden som skall leda vart och sökvägen till de sidor som du länkar till. 

Skriv nu ihop bildschemat i din vanliga textredigerare - glöm inte att ange ett värde för NAME. Lägg för varje AREA in ett HREF="..." som anger absolut eller relativ sökväg till länken.

I slutet av varje AREA-tagg skriver du in TITLE="..." och anger där vad som skall visas när musmarkören pekar på länken.

Lägg till IMG-taggen som säger vilken bild som skall visas. Skriv in USEMAP="#..." och ange bildschemats namn med hustecken (#) före.

Markera hela koden och kopiera den. Öppna html-sidan där bilden skall visas och klistra in koden på rätt plats. Spara html-sidan och öppna den i webbläsaren, så att du kan kontrollera att allt fungerar.

Själva kodsnutten sparar du gärna i en egen mapp - du kan till exempel kalla mappen HTML-rutiner och döpa kodsnutten till bildschema.txt.

I den här mappen kan du lägga en mängd användbara smårutiner, som du namnger tydligt så att det redan av filnamnet framgår vad det handlar om. I textredigeraren NoteTab Light, som är gratis och finns på SDN:s medlems-CD 2000, kan du skapa ett klippbibliotek där du direkt i textredigeraren kan hämta och klistra in dessa rutiner.

Längre fram i ditt HTML-kodande - när du frågar dig "Hur var det nu man gjorde?" - kommer du att ha nytta av dessa sparade kodsnuttar.

Läs gärna avsnittet Klickbara bilder en gång till innan du övergår till kunskapstestet.

När du ser att allt fungerar som du tänkte dig det, är det dags att skicka upp de nya eller förändrade filerna till servern. Gör på samma sätt som tidigare, och se hela tiden till att du behåller samma mappstruktur på servern som på hårddisken.

© SupportData.Net