Byt bild med muspekaren

Att ersätta vanliga textlänkar med klickbara bilder är lätt. Det är inte särskilt mycket svårare att göra om dessa bildlänkar så att det visas en ny bild när muspekaren rör vid bilden.

Du kan även utnyttja bilderna för att länka till ett ankare.

Du behöver två bilder. Snyggast blir det om bilderna har samma storlek, men det är inte ett krav. Här har jag använt två transparenta GIF-bilder, lamp1.gif och lamp2.gif.

Hela koden ligger i BODY-elementet, där jag vill att länken skall visas. Den första delen av koden talar om hur länken skall se ut när sidan ursprungligen laddas. Länken kommer att visas som bilden lamp2.gif – en släckt glödlampa:

<A HREF="#">
<IMG SRC="lamp2.gif" BORDER="0"></A>

Koden är skriven på två rader, men det är bara för att det skall bli tydligare längre ned. Du kan lägga all kod i en enda rad.

Som vanligt har jag satt in ett # i stället för adressen till sidan som skall laddas. Om du klickar på bilden händer därför ingenting annat än att du kommer till sidans början. När du använder den här koden på din egen sida, byter du ut # mot adressen till länken.

onMouseover och onMouseout
Nu lägger jag till de båda händelsehanterarna onMouseover och onMouseout. De visar vad som skall hända när muspekaren rör vid länken – bilden lamp2.gif byts mot lamp1.gif – respektive när muspekaren lämpar bilden – då kommer den ursprungliga bilden tillbaka. Båda händelsehanterarna placeras i den inledande A-taggen och du kan skriva hela koden som en enda rad.

<A HREF="#"
onMouseOver="document.images[0].src='lamp1.gif';"
onMouseOut="document.images[0].src='lamp2.gif';">
<IMG SRC="lamp2.gif" BORDER="0"></A>

Pröva skriptet genom att peka på lampan

document.images[0].src='lamp1.gif'
Det här betyder "använd bilden lamp1.gif på platsen för bilden med index 0 på sidan". Alla bilder på en sida har ett indexnummer, men början från 0.

Om jag hade skrivit så här i koden för den här sidan, skulle lampan ha visats på platsen för vänsterpilen längst upp på sidan. I stället har jag skrivit document.images[2].src='lamp1.gif' – eftersom lampan är den tredje bilden på sidan.

För att fastställa indexet för bilden som skall bytas, kan du räkna direkt i HTML-koden. Alla bilder som anges med den inledande koden <IMG skall räknas, och du börjar från 0.

Det här kan man ha litet skoj med. Pröva "Peka här" nedan.

Koden ser ut så här:

<A HREF="#" onMouseover="document.images[3].src='pek0.gif';"
onMouseout="document.images[4].src='pek1.gif';">
<IMG border="0" src="pek1.gif" align="left" width="30" height="26"></A>
<A HREF="#" onMouseover="document.images[4].src='pek0.gif';"
onMouseout="document.images[3].src='pek1.gif';">
<IMG border="0" src="pek0.gif" align="right" width="30" height="26"></A>

Du kan utnyttja den här metoden att länka för att ge dina besökare en möjlighet att snabbt komma till en bestämd plats på sidan.

Om du klickade på lampan, kom du tillbaka till sidans början. Men du kan skicka besökaren vart som helst på sidan (eller vart som helst på en annan sida), genom att lägga in ett ankare på den plats du vill länka till (målet) och ange ankarnamnet i länkkoden.

Koden för ett ankare – målet – ser ut så här:

<A NAME="ankarnamn">Någon text</A>

Faktum är att du kan utesluta detta "Någon text" om du vill och bara lägga in de båda A-taggarna.

Om du däremot vill skicka besökaren till något annat än sidans början, måste du ange ett ankarnamn. För att sedan länka till den plats där ankaret finns, ändrar du länkkoden genom att ange brädgårdstecknet plus ankarnamnet:

<A HREF="#ankarnamn"
onMouseOver="document.images[0].src='lamp1.gif';"
onMouseOut="document.images[0].src='lamp2.gif';">
<IMG SRC="lamp2.gif" BORDER="0"></A>

Vill du skicka besökaren till en bestämd plats på en annan sida skall koden se ut så här:

<A HREF="sidan.html#ankarnamn"
onMouseOver="document.images[0].src='lamp1.gif';"
onMouseOut="document.images[0].src='lamp2.gif';">
<IMG SRC="lamp2.gif" BORDER="0"></A>

© SupportData.Net