1. Vad är en rollover?

"Rollover" är ett ord som är svårt att översätta. "Rulla över" låter kanske inte så bra, men antyder ändå vad det är frågan om: saker som sker med olika objekt på en sida när muspekaren "rullar över" dem.

Jag har sett olika svenska ord för detta. "Bildflippar" är det kanske minst dåliga, men jag använder fortsättningsvis ändå ordet "rollover".

Rollovers kan användas på många olika sätt, men det gemensamma för alla är att man vill tillföra funktionalitet och snyggare design till sin sida. Jag skall visa några exempel på detta på ett par kommande sidor. Här skall vi bara lära oss grunderna.

Nackdelen med rollovers är att de gör sidan långsammare att ladda. Eftersom det är frågan om flera bilder som ligger på varandra och visas när man för muspekaren över dem, klickar på dem, osv, blir informationsinnehållet ganska så stort. man bör därför vara ganska restriktiv med alltför många rollovers på samma sida.

En annan nackdel är att kompatibiliteten blir sämre. Du kan läsa mer om detta på mina sidor om JavaScript >

Varje rollover sker inom ett segment. På den här sidan kommer vi bara att arbeta med ett enda segment, men på nästföljande sidor får du se lite mer avancerade funktioner för detta.

2. Så här gör man

I det här exemplet skall vi få en knapp att röra sig uppåt och nedåt. Klickar du på bilden här till höger kan du se exemplet i praktiken. För muspekaren över bilden så ser du hur den ändrar utseende! Jag har inte testat det i alla webbläsare, så därför vågar jag inte lova att det fungerar överallt.

Hur gjorde jag? Jo, först gjorde jag en färgad ruta och lade in några lagereffekter, bl.a "Skugga" och "Avfasning och relief". Därefter duplicerade jag lagret och lade in några andra effekter på det, så att det såg ut som om knappen trycktes ner då man växlade mellan lagren.

Därefter aktiverade jag rolloverpaletten, som du ser på bilden nedan. Normal är det läge bilden skall ha då den inte är aktiverad av muspekaren.

I normalläget har bilden två lager. För att skapa rollovereffekten måste man släcka det lager som man inte vill se, dvs det som skall komma fram när muspekaren förs över bilden. Vi släcker alltså det andra lagret i bilden och har det första synligt.

Därefter skapar vi ett nytt läge. ImageReady ger det inställningen "Över". Denna bild aktiveras då muspekaren förs över bilden. Vi tänder alltså det andra lagret och släcker det första.

Därefter sparas bilden som optimerad. Bilderna och Html-filen genereras automatiskt. Eftersom det är GIF-bilder som skapas kommer de osynliga lagren att försvinna.

Det finns några fler alternativ på rolloverpaletten, som bilden visar:

Nytt läge skapar ett nytt läge där du kan ställa in olika rollovereffekter. Bredvid varje namn, t.ex Över, finns en pytteliten svart pil. Klickar du på den får du fram fler alternativ. Jag tänker berätta mer om dem på kommande sidor.

Radera läge tar förstås bort ett markerat läge.

Radera rollover tar bort alla rollovereffekter från det aktuella segmentet, så att endast normalläget blir kvar.

Kopiera/ Klistra in används som i alla andra program.

Matcha lager tvärs över lägen kopierar alla ändringar i ett lager till de andra rolloverlägena i samma segment. Man slipper därmed göra alla ändringar manuellt.

Matcha lager tvärs över alla rollover-symboler gör samma sak som ovan, men i alla segment i bilden.

Detta var bara en kort introduktion. På följande sidor kan du läsa mer om hur man använder rolloverfunktionerna!