Text o knappar som lyser

När man för muspekaren över bilden ovan visas olika nya bilder beroende på var muspekaren befinner sig.

Så här skulle två av bilderna kunna se ut:

bild som visas när muspekaren inte befinner sig över bilden

bild som visas när muspekaren befinner sig över three

Eftersom bara en liten del av bilden behöver bytas ut kan man också dela upp bilden i olika delar t ex så här:

När muspekaren kommer in över bilden

visas i stället den här bilden

Så här...

När muspekaren kommer in över bilden

visas i stället den här bilden

etc

I det första exemplet med fyra fullständiga bilder blir bildernas sammanlagda storlek ca 85K.

Om man i stället delar upp bilden och använder åtta mindre bilder blir storleken c 30K.

FLER EXEMPEL

Här är det en bild som ser ut så här:

som byts ut mot en bild som ser ut så här:

De här bilderna är gjorda med hjälp med hjälp av verktyget Picture Tube i Paint Shop Pro 5. Välj Colored Spheres och skala ner dem till lagom storlek (här 10%).

Man kan göra knapparna ljusare eller mörkare genom att välja Colors/ Adjust/ Brightness/Contrast.

Paint Shop Pro finns som shareware på följande adress:

http://www.jasc.com

Bilden

byts mot

Den javaskript-kod som behövs för att byta bilder finns förklarad bl a under rubriken "om att göra knappar [...]" på delsidan till vänster.

Enklast är att använda "kodmakaren" under rubriken KODMAKARE/1 bildväxling [...] där allt man behöver göra är att fylla i bildfilernas namn, storlek etc, klicka på en knapp och kopiera koden.

OBS! Om man använder en bild som består av flera klickbara delar som i exemplet högst upp på den här sidan måste man använda BORDER="0" för att bilderna ska ligga kant i kant. Så här kan alltså en IMG-tagg se ut i så fall:

<IMG SRC="minbild.gif"
WIDTH="100"
HEIGHT="100"
BORDER="0">

I nyare webbläsare kan man få länktext att ändra färg (bl.a. när muspekaren förs över den) med hjälp av stylesheets.

(bildväxling fungerar i till exempel Netscape Navigator 3.0+, Mozilla 1.2+, och i MIE 4.0+)

Sidan gjordes av

ilj@flowsim.se

Senast ändrad 22 mars 2004

Den här sidan hör hemma i ett tredelat ramsystem
hos:
www.flowsim.se