Imagemap


Om man är trött på att använda standardteckensnitt och trött på de blå länkarna och inte ens tycker att de blir roligare när de är röda så gör en imagemap.

En bild...

Man snitsar till en bild i ett grafikprogram och använder precis vilket teckensnitt man vill och sen sparar man bilden som *.jpg eller *.gif och sen är halva jobbet klart.

Bild...

...en karta...

Till den andra halvan av jobbet har man onekligen god hjälp av ett websidesmakarprogram, eller program som är gjorda för just denna uppgift! Det är fullt möjligt att klara det ändå men det blir en del mätande och koordinater att hålla reda på.

Man börjar med att specificera bildens bredd och höjd, den här bilden har höjden 60 (Y-led) och bredden 400 (X-led). Ja, dessvärre gäller det att hålla reda på X och Y-kordinater här. Lite knepigt men inte olösligt. Bilden vänstra hörn upptill har X-värde 0 och Y-värde 0. Alltså har bildens högra hörn nedtill X-värde 300 och Y-värde 60.

Det du behöver göra nu är att skapa en rektangel runt varje länk, "Bak", "Hem" och "Fram". Rektangeln består av endast två(!) punkter. (1) X och Y längst upp till vänster, (2) X och Y längst ner till höger. Det underlättar kanske att använda grafikprogrammet igen och skriva ned kordinaterna efterhand som man flyttar musen till de lämpliga punkterna, men kolla att du använder samma mått på bilden på hemsidan som den visas i grafikprogrammet. Annars kan man pröva sig fram om man har ett tusan till sinne för proportioner och ögonmått.

...en bildkarta!

navjohn.gif

Koden till denna bild är:

<MAP NAME=johnson>
<AREA HREF="link.htm" COORDS="28, 9, 76, 35">
<AREA HREF="html.htm" COORDS="100, 20, 148, 48">
<AREA HREF="knapp.htm" COORDS="238, 26, 280, 52">
</MAP>
<IMG src="navjohn.gif" alt="navjohn.gif" USEMAP="#johnson" WIDTH=300 HEIGHT="60">


[Förra]   [Htlmguider]    [Nästa]