DHTML

Manipulera en bild

Vi ska börja med en enkel sak. När muspekaren förs över någon av bilderna i bilder.html ska bilden bli större och när muspekaren sedan förs utanför bilden igen ska den återfå sin tidigare storlek. Det blir alltså en slags animering av bilden som effekt.

Det första vi gör är att id-märka bilderna för att kunna nå dem via DOM. För den första bilden ser det ut såhär:

<IMG ID="bild1" SRC="img/nike.jpg" WIDTH="200px" ALT="Nike">

Vi har alltså gett bildern id = bild1 och kan nu komma åt bilden från hela dokumentet via metoder i DOM. Kom ihåg att du kan göra såhär med alla element i din HTML!

Sen använder vi oss av två funktioner som anropas när muspekaren är över respektive dras utanför bilden. Detta är onMouseOver och onMouseOut som är händelser (kalls även events) som kan finns för objekt i DOM. Det finns många olika händelser och metoder och vi kommer att gå igenom fler senare.

<IMG ID="bild1" SRC="img/nike.jpg" WIDTH="200px" onmouseover="bild1.width='400'" onmouseout="bild1.width='200'" ALT="Nike">

I exempelfilen bilder.html byter vi nu ut den tidigare koden för bilden mot kodstycket här ovanför.

OnMouseOver anropas när användaren för musen över bilden och kör då anropet som står innanför "", alltså bild.1.width='400'. Bild1 är det objekt som vi ska manipulera och width är den egenskap som ska sättas. Värdet sätts till 400 (pixlar) genom enkel tilldelning. Tilldelning är ett uttryck för att ge en variabel/attribut ett värde och sker oftast genom sättet

variabel=värde
.

Vi gör nästan samma sak med händelsen som heter OnMouseOut, men vill här att bilden ska anta den mindre formen igen, 200 pixlar bred.

Vi testar nedan och ser hur det fungerar. Prova att föra musen över den övre bilden och sen utanför igen.

Resultat

Vi lägger till en bild till som du ska få öva på på egen hand. Eftersom det nu ska bli fler än en bild på sidan passar det bra med en rubrik för varje bild. Lägg till rubriken "Det här är Nike när hon är lugn och fin" över den första bilden, t ex med koden

<H2>Det här är Nike när hon är lugn och fin</H2>
Bilden heter nike2.jpg och du kan ladda ner den här. Spara filen som nike2.jpg i katalogen img (där filen nike.jpg ligger sedan tidigare). Lägg nu till följande kod under koden för den första bilden i filen bilder.html


<H2>Det här är Nike när hon inte är lika lugn.</H2>

<IMG SRC="img/nike2.jpg" width="400px" ALT="Nike">

Resultat

Kod

Övning Nu ska du försöka göra så att också den andra bilden får samma effekt. Sätt dess id till t ex bild2 och gör för övrigt som för den första bilden. Du kan t o m testa att låta någonting hända med den ena bilden när musen förs över den andra. Det är inte säkert att det är svårare alls!