 |
JavaScript-skolan
Bilder |
 |
2. Rollover
3. Ladda bilder
4. Preload
5. Slumpvisa bilder
6. Övningar
Obs!
Alla exempel och facituppgifter öppnas i ett nytt fönster!
1. Inledning
På den här sidan berättar jag lite om hur man kan använda JavaScript ihop med bilder, t.ex för att kontrollera hur de laddas, visas och liknande.
På min sida "Panoramabild i Fireworks MX 2004" i sektionen "Hur gjorde jag det här?" hittar du fler scripts för att visa bilder. Läs mer >
2. Rollover
På svenska säger man ibland "bildrullning", men jag behåller här det engelska fackordet. Man kan göra en sådan på några olika sätt och jag tänker visa två olika här.
Exempel 1
<script language="JavaScript">
<!--
if (document.images) {
Bild1 = new Image;
Bild2 = new Image;
Bild1.src = "js_bilder_01.gif";
Bild2.src = "js_bilder_02.gif";
}
else {
Bild1 = "";
Bild2 = "";
document.BildRull = "";
}
-->
</script>
+
<a href="js_bilder_x1.html"
onMouseOver="document.BildRull.src=Bild2.src"
onMouseOut="document.BildRull.src=Bild1.src">
<img src="js_bilder_01.gif"
name="BildRull" border="0">
</a>
Titta på exemplet i praktiken >
Scriptet fungerar inte i alla webbläsare, vilket kanske gör det ointressant. icke desto mindre fungerar det i vissa och kan därför vara värt en närmare titt.
Länken har två händelsekommandon. I onMouseOver-delen sägs att objektet BildRull med källan (src) "Bild.src" skall visas. I scriptet finns en definition av denna. På liknande sätt finns en onMouseOut-del, där Bild1 skall visas då muspekaren försvinner från bilden.
Själva scriptet definierar en lista med två bilder och var deras källa (src) finns. För de webbläsare som inte förstår kommandot "document.images" finns ett else-kommando, som säger att inget alls skall göras i så fall.
Det andra exemplet jag tänkte visa har jag hämtat från en sajt som heter Dynamic Drive [www.dynamicdrive.com]. Han som tillverat det heter Chris Poole [chrispoole.com]:
Exempel 2
<script language="JavaScript">
<!--
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length;
i++) {
if (imgarr[i].getAttribute('hsrc'))
{
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function()
{
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function()
{
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
-->
</script>
+
<table>
<tr>
<td><a href="js_bilder_x2.html">
<img border="0" alt=""
src="js_bilder_01.gif" hsrc="js_bilder_02.gif"></a>
</td>
</tr>
<tr>
<td><a href="js_bilder_x2.html">
<img border="0" alt=""
src="js_bilder_03.gif" hsrc="js_bilder_04.gif"></a>
</td>
</tr>
</table>
Titta på exemplet i praktiken >
Scriptet inleds med en funktion och metoden init(), som kan sägas vara en allmän metod för diverse göromål. Första if-satsen säger att om inget objekt kan returneras så skall ett tomt värde returneras.
Därefter definieras tre variabler. Den första används för att bestämma vilken bild som skall visas från attributet "src" i Html-koden. Den andra definierar en array och den tredje definierar objektet "img".
For-satsen letar igenom den nyss definierade arrayen. If-satsen säger att om en bild hittas, så skall den ha ett tillhörande attribut, "Hsrc".
De fyra nästa raderna som börjar med "img" definierar "hsrc" och säger att det finns en koppling mellan dem. Raden som börjar med "this" skapar kopplingen mellan "src" och "hsrc".
Html-koden blir med scriptet enkel, eftersom man bara behöver hålla reda på två enkla attribut: src och hsrc.
3. Ladda bilder
Följande script ersätter en bild med en ny, då den gamla laddats färdigt:
Exempel 3
<script language="JavaScript">
<!--
function BytBild() {
if (document.image1.complete)
document.image1.src = "js_bilder_x3_ny.gif";
}
-->
</script>
+
<body onLoad="BytBild()">
+
<img name="image1" src="js_bilder_x3_gammal.gif" width="143" height="88">
Titta på exemplet i praktiken >
Scriptet fungerar inte i alla webbläsare, men det gäller många scripts för just bildmanipulation. Man måste därför testa dem noggrant innan de används.
4. Preload
"Preload" kallar jag det när man laddar ner bilder helt innan man visar dem. Med ett script kan man ställa in detta:
Exempel 4
<script language="JavaScript">
<!--
var MinBild = new Image();
MinBild.src = "js_bilder_x4.jpg";
-->
</script>
+
<body onLoad="document.bild4.src=MinBild.src">
+
<img name="bild4" src="tom.gif" width="400" height="247">
Titta på exemplet i praktiken >
Scriptet anger alltså en ny bild och dess källa. Med onLoad anropas bilden när objektet angivet med "src" har laddats färdigt. Genom att namnge min bild har jag fått rätt bild att uppdateras. Jag har också en tom bild om 8x5 pixlar som jag förstorat upp enligt måtten. Allt för att spara lite plats!
5. Slumpvisa bilder
På min startsida har jag ett script som laddar bilder slumpvis. Jag har hämtat det från ett scriptarkiv som heter The JavaScript Source [javascript.internet.com]. Scriptet ser ut så här:
Exempel 5
<script language="JavaScript">
<!--
var theImages = new Array()
theImages[0] = 'js_bilder_01.gif'
theImages[1] = 'js_bilder_02.gif'
theImages[2] = 'js_bilder_03.gif'
theImages[3] = 'js_bilder_04.gif'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}-->
</script>
+
<body>
<script language="JavaScript">
showImage();
</script>
Titta på exemplet i praktiken >
Någon garanti för att samma bild visas två gånger finns inte, men det fungerar ganska bra ändå. Det som skapar variationen är metoden "Math.random()".
6. Övningar
Övning
1
Utgå ifrån Exempel 1 och
försök skapa en rollover
som involverar flera bilder.
Övning
2
I Exempel 2 visade jag hur man kan
använda ett lånat script
för att skapa finesser på
sin sida. Försök använda
scriptet i exemplet när du gör
en rollover-meny på en webbsida!
Övning
3
Skapa en lågupplöst version
av en stor bild. Placera den lågupplösta
framför och låt den högupplösta
visas då den är färdigladdad.
Använd scripten i Exempel 3 och
4.
Övning
4
Exempel 5 visade hur man kan använda
en slumpgenerator för att ladda
bilder. Försök använda
scriptet på en egen sida. Kan
man ändra slumpgeneratorn för
att ändra laddningen?
Övning
5
Det finns många scripts att
hitta på nätet. Var inte
rädd för att testa olika
scripts och se om de fungerar. På
nästa sida berättar jag
mer om hur du går vidare. Du
kan också leta scripts bland
arkiven bland mina surftips. Gå
dit >