©copyright ilj@flowsim.se
 DHTML på svenska 5
visa och dölja hela lager
 

 

 

 

 
 
1
 En bild för huvudrubriken, som i exemplet ser ut så här:
 

 
Bilden placeras på ett lager (mellan DIV-taggar) och görs klickbar med hjälp av taggar som kan se ut så här:
 
<DIV ID="mainmenu"
   STYLE="position:absolute;visibility:visible;top:120px;left:120px">
<A HREF="javascript:void(0)"
   ONMOUSEOVER="iljshowlinks()"
   ONMOUSEOUT="iljhidelinks()">
<IMG SRC="rubrikbild.gif"
   WIDTH="150"
   HEIGHT="40"
   ALT="beskriv bilden här"
   BORDER="0"></A>
</DIV>
 
KOMMENTAR:
Efter STYLE i DIV-taggen reglerar man bl a var bilden ska placeras; top:120px betyder att bilden hamnar 120 pixel från sidans topp och left:120px betyder att den hamnar 120 pixel från vänsterkanten.
 
När muspekaren förs in över bildern (ONMOUSEOVER) anropas en JavaScript-funktion som fått namnet iljshowlinks() och som alltså ser till att bilden med länkarna visas.
 
När muspekaren lämnar bildern (ONMOUSEOVER) anropas en JavaScript-funktion som fått namnet iljhidelinks() och som ser till att bilden med länkarna görs osynlig.
 
 2
 Under rubrikbilden placeras en bild med de olika länkarna; i exemplet ser den ut så här:
 

 
De olika länkarna på bilden görs klickbara (hur man gör bilder med flera olika klickbara ytor, s k image maps, finns beskrivet under rubrikerna HTML och BILD & FÄRG) och bilden placeras på ett lager som görs osynligt (visibility:hidden), t ex så här:
 
<DIV ID="iljsublinks"
   STYLE="position:absolute;top:158px;left:120px; visibility:hidden">
<IMG SRC="laenkbild.gif"
   WIDTH="122"
   HEIGHT="122"
   ALT="beskriv bilden här"
   USEMAP="#iljmap"
   BORDER="0">
<MAP NAME="iljmap">
<AREA SHAPE="rect"
   COORDS="0,0,120,29"
   HREF="sidaattladda1.html"
   ONMOUSEOUT="iljhidelinks()"
   ONCLICK="iljhidelinks()"
   ONMOUSEOVER="iljshowlinks()">
<AREA SHAPE="rect"
   COORDS="0,29,120,59"
   HREF="sidaattladda2.html"
   ONMOUSEOUT="iljhidelinks()"
   ONCLICK="iljhidelinks()"
   ONMOUSEOVER="iljshowlinks()">
<AREA SHAPE="rect"
   COORDS="0,59,120,79"
   HREF="sidaattladda3.html"
   ONMOUSEOUT="iljhidelinks()"
   ONCLICK="iljhidelinks()"
   ONMOUSEOVER="iljshowlinks()">
<AREA SHAPE="rect"
   COORDS="0,79,120,120"
   HREF="http://www.flowsim.se"
   ONMOUSEOUT="iljhidelinks()"
   ONCLICK="iljhidelinks()"
   ONMOUSEOVER="iljshowlinks()">
</MAP>
</DIV>
 
KOMMENTAR:
Tänk på att det inte får vara något mellanrum mellan de olika klickbara ytorna!
 
 3
 JavaScript-koden placeras mellan SCRIPT-taggar i HEAD-delen och ser ut så här:
 
<SCRIPT LANGUAGE = "JavaScript"
   TYPE="text/javascript">
<!--
 function iljshowlinks()
{
if(document.getElementById)
   {lagret=document.getElementById('iljsublinks')} //w3
if(document.all)
   {lagret=document.all['iljsublinks']} //MSIE 4+
if(lagret.style)
   {lagret.style.visibility="visible"}
if(document.layers)
   {document.iljsublinks.visibility="show"} //Netscape 4
}
function iljhidelinks()
{
if(document.getElementById)
   {lagret=document.getElementById('iljsublinks')} //w3
if(document.all)
   {lagret=document.all['iljsublinks']} //MSIE 4+
if(lagret.style)
   {lagret.style.visibility="hidden"}
if(document.layers)
   {document.iljsublinks.visibility="hide"} //Netscape 4
}
//-->
</SCRIPT>
 
Den kod som står efter if(document.layers) fungerar i Netscape 4.x, den som står efter if(getElementById) fungerar i webbläsare som följer w3-standarden, t ex Mozilla 1.6
och den som står efter if(document.all) fungerar i MIE 4+.
 
 
 
en linje
 
Sidan gjordes av
 
ilj
 
ilj@flowsim.se
 
en fyrkant
 
Senast ändrad 30 april 2004.
 
Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
JavaScript på svenska