Det script vi nu ska titta på visar hur man kan dölja och visa lager.
Lägg märke till att du ändrar attributen visibility med värdet
hidden (osynlig) och visible (synlig).
I Netscape ska det egentligen vara show och hide,
fast eftersom Netscape även accepterar hidden och visible
så kan man alltid använda dessa värden, både för Explorer och Netscape.
Exempel 9 - Lager visas/döljs
<SCRIPT LANGUAGE="JavaScript">
<!--This is one of many scripts which are available at: *---
//--http://www.JavaScript.nu/javascript *---
//--This script is FREE, but you MUST let these lines *---
//--remain if you use this script. *---
function visa_dolj(namn,varde)
{
if (document.all)
{
document.all[namn].style.visibility=varde; //Explorer 4,5 har denna hierarki
}
else if (document.layers)
{
document.layers[namn].visibility=varde; //Netscape 4 har denna hierarki
}
else if (document.getElementById)
{
document.getElementById(namn).style.visibility=varde; //Netscape 6 har denna hierarki
}
}
//-->
</SCRIPT>
Titta på mina pengar! Du kan båda
<A HREF="javascript:visa_dolj('magicmoney','hidden')">dölja</A>
och
<A HREF="javascript:visa_dolj('magicmoney','visible')">visa</A>
dem.
<BR>
<DIV ID="magicmoney"><IMG SRC="pengar.gif"></DIV>
En annan mycket användbar funktion med DHTML är att du kan skriva information till dina lager,
dvs du kan ändra vad som ska finnas i dina lager. Exemplet nedan innehåller ett lager med
en fråga. Trycker man på frågan så kommer svaret på frågan upp.
Frågan har alltså ersatts av svaret.
Exempel 10 - Ändra ett lagers innehåll
<SCRIPT LANGUAGE="JavaScript">
<!--This is one of many scripts which are available at: *---
//--http://www.JavaScript.nu/javascript *---
//--This script is FREE, but you MUST let these lines *---
//--remain if you use this script. *---
function andra_innehall(txt) //Ändrar texten
{
if (document.all)
{
document.all["tallager"].innerHTML=txt; //Explorer har denna hierarki
}
else if (document.layers)
{
document["tallager"].document.open();
document["tallager"].document.write(txt); //Netscape 4 har denna hierarki
document["tallager"].document.close();
}
else if (document.getElementById)
{
document.getElementById("tallager").innerHTML=txt; //Netscape 6 har denna hierarki
}
}
//-->
</SCRIPT>
<DIV ID="tallager" STYLE="position:absolute"><A STYLE="text-decoration: none" HREF="javascript:andra_innehall('Svar: 25')">Vad är 5<SUP>2</SUP></A></DIV>
Om du vill kan du göra så att ett lager endast visar information i en viss del av lagret.
Här har vi ett lager med en massa text, fast bara en del av texten visas -
det som visas genom "hålet" som vi gjort i lagret:
Exempel 11 - Hål i lagret
<DIV ID="textblock" STYLE="position:absolute; background-color:lightgreen; clip: rect(10,75,50,10)">
Hejsan hej på er alla.
<BR>
Jag vet att du inte kan se hela denna text,
<BR>
så jag antar att det är ganska onödigt
<BR>
att fortsätta skriva nu.
</DIV>
background-color:lightgreen gör så att lagret blir grönt,
anledningen till att jag har det i detta exempel är att du lättare
ska se vart hålet finns.
Det viktiga i detta exempel är dock att detta lager har
clip: rect(10,75,50,10) i STYLE-attributen.
Det detta gör är helt enkelt en rektangel som visar det som
finns i lagret, det övriga som ej är bakom detta hål visas inte alls.
Definitionen: clip: rect(a,b,c,d)
Övre vänstra hörnet befinner sig a pix neråt och d pix åt höger räknat från övre vänstra hörnet på lagret.
Nedre högre hörnet befinner sig c pix neråt och b pix åt höger räknat från övre vänstra hörnet på lagret.
Om hela lagret är från pixlarna
(0,0) till (10,10)
(egentligen kan det vara hur stort som helst, jag tar
(10,10)
som exempel för att det ska överensstämma med bilden) så skulle man kunna ha
något av följande hål i lagret:
clip: rect(2,5,4,3)
...Eller varför inte...
clip: rect(8,8,9,3)
