copyright I Ljungström




 
 
 
 
 
 
 
 

 
 
 
 
flowsim AB
VAD BEHÖVER MAN FÖR ATT VÄXLA BILDER NÄR MUSPEKAREN FÖRS ÖVER EN BILD?
  • ETT SKRIPT SOM FÖRLADDAR DE BILDER DU TÄNKER ANVÄNDA!
  • ETT SKRIPT SOM SER TILL ATT BILDERNA BYTS!
  • MINST TVÅ BILDER FÖRSTÅS!
    T ex
     
    När skriptet är klart ser det ut så här (testa med muspekaren):
flowsim AB
HUR GÖR MAN?
 
Enklaste sättet är att använda någon av skriptfixarna under rubriken KODMAKARE (se menybilden högst upp i fönstret). Allt man behöver göra där är att fylla i bildernas namn, bredd och höjd och klicka, så är skript och bildtaggar klara att klistras in på hemsidan.
 
Eller också kan man skriva skriptet själv och göra så här:
 
1 PLACERA BILDEN PÅ SIDAN!
Så här kan bildtaggen se ut:
 
<IMG SRC="1bild1.gif"
          WIDTH="102"
          HEIGHT="38"
          ALT="bildbeskrivning"
          BORDER="0"
          NAME="minbildplats">
 
Namnet - efter NAME - är viktigt! Det används av det skript som byter bilderna och talar helt enkelt om var den nya bilden ska visas. Det kan förstås vara ett namn vilket som helst men i det här exemplet är det alltså minbildplats.
Efter SRC finns namnet på den bildfil som visas på sidan direkt när den laddats klart.
 
flowsim AB
 
2 GÖR BILDEN KLICKBAR!
Placera den alltså mellan A-taggar, t ex så här:
 
<A HREF="mailto:namn@adress.se">
 
      här ska bildtaggen placeras!
 
</A>
 
flowsim AB
 
3 SE TILL SÅ ATT NÅGOT HÄNDER NÄR MUSPEKAREN FÖRS ÖVER BILDEN!
Se alltså till så att A-taggen reagerar på ONMOUSEOVER, så här:
 
<A HREF="mailto:namn@adress.se"
      ONMOUSEOVER="minbildbytarfunktion_in()">
 
      här ska bildtaggen placeras!
 
</A>
 
Den blå texten mellan citationstecknen efter ONMOUSEOVER är ett anrop på den kodbit som ska byta ut bilden. I det här exemplet ska den funktionen få namnet minbildbytarfunktion_in().
 
flowsim AB
 
4 SE TILL SÅ ATT NÅGOT HÄNDER NÄR MUSPEKAREN LÄMNAR BILDEN!
Se alltså till så att A-taggen reagerar på ONMOUSEOUT, så här:
 
<A HREF="mailto:namn@adress.se"
      ONMOUSEOVER="minbildbytarfunktion_in()"
      ONMOUSEOUT="minbildbytarfunktion_out()">
 
      här ska bildtaggen placeras!
 
</A>
 
Den kodbit som ska visa en ny bild när muspekaren lämnar bilden får i det här exemplet namnet minbildbytarfunktion_out().
 
flowsim AB
 
5 SE TILL SÅ ATT BILDERNA FINNS FÄRDIGLADDADE NÄR DE BEHÖVS!
Om man inte på något sätt ser till så att den bildfil som ska visas vid ONMOUSEOVER laddas samtidigt med sidan så kommer den att börja laddas först när muspekaren förs in över bilden och det kan ta tid om bilden är stor.
Förladda alltså bilderna med hjälp av ett skript som placeras någonstans mellan HEAD-taggarna och som kan se ut så här:
 
<SCRIPT LANGUAGE = "JavaScript"
             TYPE="text/javascript">
<!--
if(document.images)
{
    foerstabilden= new Image()
    foerstabilden.src="1bild1.gif"
 
    andrabilden= new Image()
    andrabilden.src="2bild2.gif"
}
//-->
</SCRIPT>
 
Allt skript-raderna här ovanför gör är att ladda ner två bild(fil)er, nämligen 1bild1.gif och 2bild2.gif .
Bilderna laddas hem till besökarens dator på samma sätt som själva HTML-sidan och de bilder som visas på den men de här två bilderna syns alltså inte på sidan. Däremot kan de snabbt göras synliga med hjälp av olika skript.
 
Jämför följande två sätt att ladda en och samma bildfil (2bild2.gif):

 
De två översta raderna skapar en osynlig bild med namnet enbild och med bildfilen 2bild2.gif som källa (src).
De två undre raderna skapar en synlig bild med namnet enbild och med bildfilen 2bild2.gif som källa (SRC).
SRC är en förkortning av source (SouRCe).
 
I det här exemplet används tre bilder - en synlig som heter minbildplats och två osynliga som heter foerstabilden resp andrabilden.
När exempelsidan laddat klart ser det - innan någon rört muspekaren - ut så här:
den synliga minbildplats har enligt informationen i IMG-taggen bildfilen 1bild1.gif som källa (src).
den osynliga andrabilden har enligt informationen i skriptet bildfilen 2bild2.gif som källa (src).

 
flowsim AB
 
6 GLÖM INTE SKRIPTET SOM BYTER BILD!
Så här ser funktionen som visar en ny bild när muspekaren förs in över bilden ut:
 
 
Den här skriptdelen kan man läsa så här:
när någon kallar på funktionen minbildbytarfunktion_in() (i exemplet sker det när muspekaren förs in över bilden) så ska den synliga bild(plats)en (minbildplats) som finns på dokumentet (document) få samma bildfil som källa (src) som den osynliga (andrabilden) nämligen bildfilen 2bild2.gif.
 
I det här exemplet behövs även en funktion som visar en ny bild när muspekaren lämnar bilden. Så här ser den ut:
 
 function minbildbytarfunktion_out()
{
if(document.images)
   {
   document.minbildplats.src = foerstabilden.src
   }
}
 
 Hela skriptdelen, som bör placeras någonstans mellan HEAD-taggarna, ser ut så här:
 
<SCRIPT LANGUAGE = "JavaScript"
             TYPE="text/javascript">
<!--
if(document.images)
{
    foerstabilden= new Image()
    foerstabilden.src="1bild1.gif"
 
    andrabilden= new Image()
    andrabilden.src="2bild2.gif"
}
 
function minbildbytarfunktion_in()
{
if(document.images)
   {
   document.minbildplats.src = andrabilden.src
   }
}
 
function minbildbytarfunktion_out()
{
if(document.images)
   {
   document.minbildplats.src = foerstabilden.src
   }
}
 
//-->
</SCRIPT>
 
Man kan skriva bildbytarkod på flera olika sätt. Man behöver till exempel inte använda olika funktioner för att ta hand om ONMOUSEOVER resp ONMOUSEOUT och inte heller behöver man använda olika funktioner för att byta bilder på flera bild(plats)er på en sida; en och samma funktion kan ta hand om alltihop om den får rätt information från anropet.
Hur en sådan funktion kan se ut beskrivs i flera av exemplen under JAVASCRIPT.
 
 
 

Sidan gjordes av
 
copyright I Ljungström
 
ilj@flowsim.se
 
Den här sidan hör hemma i ett tvådelat ramsystem
hos:
http://www.flowsim.se