|
TANGRAM MASTERMIND TETRIS |
|
kod och förklaringar längre ner
När muspekaren förs in över en textlänk t ex TANGRAM och en MouseOver alltså äger rum visas en ny bild på samtliga bildplatser. Den svarta bilden av en TANGRAM-figur byts ut mot en blå och de andra bilderna ersätts av blekare bilder.
När muspekaren förs in över en bild händer samma sak, dvs det visas nya bilder på alla tre bildplatserna.
Tre olika bilder visas alltså på ett och samma ställe. En svartvit bild när muspekaren inte befinner sig över någon bild eller textlänk, en färglagd när muspekaren befinner sig över just den bildplatsen och en gråtonad när muspekaren befinner sig över någon annan av de tre bilderna eller textlänkarna.
Så här ser de tre TANGRAM-bilderna ut (använd inte mina bilder!):
Först måste bilderna förladdas. Gör man inte det börjar bilden laddas först när muspekaren förs in över bilden. Så här förladdar man en bild som heter test.gif och en som heter test8.gif
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.images)
{
bild=new Array()
bild[0]=new Image()
bild[0].src="test.gif"
bild[1]=new Image()
bild[1].src="test8.gif"
}
//-->
</SCRIPT>
Bilden test.gif kan man därefter få tag på genom att använda bild[0].src; bilden test8.gif får man tag på genom att använda bild[1].src. Ytterligare bilder laddas in på samma sätt; man byter bara ut siffran inom hakparenteserna.
Placera kodbiten som förladdar bilderna någonstans i HEAD-delen (se MINIMANUAL 1 lite grunder).
I det här exemplet används en funktion för att byta bilder på alla ställen; så här ser den ut:
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
function iljbyte(bildplats,bildattvisa)
{
if(document.images)
{
document.images[bildplats].src=bild[bildattvisa].src
}
}
//-->
</SCRIPT>
Placera funktionen i HEAD-delen. ändra ingenting i funktionen!
Den här funktionen visar en ny bild på en bildplats varje gång den anropas. VILKEN bild den ska visa och VAR den bilden ska visas får funktionen information om i anropet.
Anropet består av funktionens namn, i det här exemplet alltså
iljbyte()
Inom parentes efter anropet iljbyte() som placeras efter onMouseOver och efter onMouseOut talar man om på vilken bildplats en ny bild ska visas och vilken bild det är som ska visas.
Varje bild (som syns när sidan laddas) placeras på sidan med en tagg som ser ut ungefär så här:
<A HREF="#"
ONMOUSEOVER="iljbyte('bildplats2',3);
iljbyte('bildplats1',2);
iljbyte('bildplats3',8)"
ONMOUSEOUT="iljbyte('bildplats2',4);
iljbyte('bildplats1',0);
iljbyte('bildplats3',6)">
<IMG SRC="test1.gif"
BORDER="0"
NAME="bildplats2"
WIDTH="115"
HEIGHT="115"
ALT=""></A>
De tre bildplatserna i exemplet har fått namnet bildplats1, bildplats2 och bildplats3, t ex
IMG NAME="bildplats1"
När en onMouseOver äger rum anropas funktionen iljbyte() med bildplatsens namn och bildens siffra inom parentes - t ex iljbyte('bildplats2',3). Det betyder att funktionen på bildplatsen med namnet bildplats2 ska visa den bild som förladdats som bild[3].src
Eftersom exemplet använder tre bildplatser måste funktionen anropas tre gånger vid onMouseOver och tre gånger vid onMouseOut; på varje bildplats ska det visas en ny bild och vilken det blir bestäms av siffran efter kommatecknet som finns efter bildplatsnamnet.
ÄNDRINGAR SOM MÅSTE GÖRAS?
I IMG-taggen måste man fylla i bildernas bredd (WIDTH) och höjd (HEIGHT) i pixel och också namnet på den bildfil som ska visas när sidan laddas.
Om man vill ha en ram runt bilderna kan man ändra siffran efter BORDER; en tia istället för nollan skapar en ram som är 10 pixlar bred. Ramens färg blir densamma som länkarnas färg.
Efter NAME fyller man i ett namn; varje bild måste förstås ha ett unikt namn.
Se till så att alla bilder som behövs förladdas!
Ändra ingenting i själva funktionen!
Och så måste man förstås fylla i rätt antal anrop efter varje onMouseOver och varje onMouseOut och ange vilken bild som ska visas var inom parentesen.
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 21 september 1999.
Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se
JavaScript på svenska