STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML

Dhtml - dynamiska sidor

Allmänt om dhtml
Vad är dhtml?
Objektmodell
Att ta hänsyn till
Jobba med olika lager
Synligt, osynligt
Positionering
HTML-utbyte
Några exempel
Läsa mer!

Allmänt om dhtml.
Dynamisk html brukar i vanligt tal förkortas dhtml, det nya sättet att göra din hemsida mer interaktiv i realtid dvs dynamiskt. Det är definitivt inte någon ny version av markeringsspråket html :). Vanliga html-sidor är statiska, när sidan laddats in så kan du kika på den men så fort något ska hända så måste sidan laddas in igen i din browser, ett anrop mot webservern måste göras. Det som utmärker dhtml är det faktum att sidan inte behöver laddas om varje gång något interaktivt ska ske på sidan - det sker i nutid (realtid).

Det som är lite tråkigt för en hemsidesbyggare är det faktum att NS (Netscape) och MSIE (Internet Explorer) ser inte på samma sätt när det gäller dhtml och använder delvis olika tekniker. Så det som funkar bra i MSIE kanske inte ens syns i NS, så bygg inte hela sidan med dhtml utan se till att den funkar för alla andra oxå. Därför är det mycket viktigt att du kollar sidan i bägge webläsarna när du gör din sida.

Eftersom detta är en nybörjarguide kommer jag inte att gå så djupt in i användandet och kodandet av dhtml. Som nybörjare är det så mycket annat att tänka på för att överhuvudtaget få till en hemsida, så att börja experimentera med dhtml kanske inte är det första man gör. Men många har efterfrågat just detta avsnitt om dynamisk html så jag tänker lite kort förklara vad det är och hur man kan applicera det på sin hemsida, mest enkla och lättförståeliga exempel givetvis. Men under avsnittet Läsa mer! kan du få tips om vart du kan läsa mer om detta.

Vad är dhtml?
Dhtml är en salig blandning av html, style sheets (CSS), objektmodell (se avsnitt nedan) och ett eller flera varianter av scriptspråk. Det kan vara allt från en sådan enkel sak att texten byter färg när du för musen över den till avancerade spel. Pröva att för musen över ordet dynamiskt! Texten blir röd i MSIE när man för markören över ordet och återgår till svart när man tar bort markören från ordet, koden för detta är:
<span onMouseOver="this.style.color='red'" onMouseOut="this.style.color='black'">dynamiskt!</span>

Eftersom span i exemplet ovan inte har något id så används this.style.color för att tala om att här ska ske något. Hade span-taggen fått ett id inkodat så hade man kunnat adressera direkt via dess id både i taggen samt från script utifrån. För markören över ordet dynamiskt! I MSIE blir ordet grönt.
<span id="demo" onMouseOver="demo.style.color='green'" onMouseOut="demo.style.color='black'">dynamiskt!</span>
Det kommer att klarna mer när du kikar på exemplen nedan vilket användningsområde id har i dhtml.

Objektmodell
Objektmodell är en rak översättning av engelskans Document Object Model (DOM). Användandet av objektmodellen skiljer sig åt i NS respektive MSIE. Netscape och Exporer har tagit fram varsin objektmodell, dock finns en rekommendation hos http://www.w3.org/. Här kan du läsa om NS dokumentation, samt hur det skiljer sig i Netscape 6.*. Givetvis har MSIE en gedigen dokumentation.

En objektmodell är det som beskriver ordningen (hierarkin) av element i ett html-dokument, man kan se det som ett träd som grenar ut. Detta är användbart exempelvis när man vill *nå*/anropa ett element/lager på sidan och utföra något när man kanske för musen över det elementet eller klickar på en länk. En viktig bit i dhtml är just id-attributet som skapar ett objekt av ett html-element och används sedan när man vill *nå* det för att något ska hända med just det elementet. Krångligt? Nå, det är inte _helt_ enkelt. Du kommer att förstå lite mer när du kikar på exemplen under varje avsnitt nedan.

Att ta hänsyn till
NS använder - document.layers i sin objektmodell och MSIE - document.all. Det bästa sättet att avgöra vilken browser som används är att anpassa scriptet för både NS och MSIE, i de fall det fungerar att göra så - de flesta exempel här bygger på den principen. En annan variant är att omdirigera NS respektive MSIE till varsin sida, kan vara bra eftersom de tolkar dynamisk html lite olika eller inte alls i vissa fall. Hur du gör på ett enkelt sätt kan du se här!

Jobba med olika lager
Man kan dela upp sidan i skikt eller som jag föredrar att kalla det lager, detta sker oberoende av annat innehåll på hemsida om du positionerar med position: absolute. Detta innebär att det går att lägga element till synes ovanpå varandra. En annan poäng är att man efter att sidan laddats in kan ändra innehållets placering via exempelvis script. Vilket är en stor skillnad mot gamla statiska html-sidor som laddas in och sedan händer inget mera förrän man laddat in en ny html-sida och/eller via exempelvis ett cgi-script anropat servern för att utföra något.

Ett lager är en "del" av en websida som behandlas som en helt oberoende enhet, lagret kan visas, döljas och/eller flyttas. Här skiljer sig Netscape och Microsoft åt, inte helt oväntat :-). Netscape använder taggen layer för att skapa ett lager.
<layer top=0 left=0>denna text ligger i ett lager positionerat till vänstra övre hörnet via top och left</layer>

Nu har lagret placerats på web-sidan via koordinaterna angivna i top och left - startpunkt är 0,0 vilket innebär högst upp i vänstra hörnet på sidan. Läs mer om NS och taggen layer! Du kan givetvis ha flera lager på sidan, kika här för ett exempel på layer och hur NS tolkar detta och om du har MSIE så kommer du se att det inte funkar alls :).

Men det bästa sättet är att använda en div-tagg och därmed slippa alltför mycket dubbelkodande rent html-mässigt eftersom det funkar i både NS och MSIE. Att man fortfarande måste särskilja de olika objektmodellerna i script kommer man inte ifrån.

<div id="lager" style="position: absolute; top: 10px; left: 50px; width: 150px">
<img src="bild.gif" width=32 height=50 alt="alternativtext">
</div>

Synligt, osynligt
Ett element/lager kan via dynamisk html göras synligt respektive osynligt. Ett exempel, en bild kan vid inladdning av sidan vara osynlig för att senare via ett script göras synligt. Du anger i div-taggen visibility: hidden för osynlig samt
visibility: visible för synlig.

<div id="pos" style=" visibility: hidden; position: absolute; top: 10px; left: 50px">
<img src="bild.gif" width=32 height=50 alt="Kevin">
</div>

Lägger man bilden inom en layer-tagg gäller visibility=hide för gömd samt visibility=show för att synliggöra bilden.
<layer visibility=hide><img src="bild.gif" width=65 height=71 alt="alternativtext"></layer>

När man via script ska *nå* elementet/lagret för att göra förändringar skriver man olika beroende på vilken objektmodell man vänder sig till. I NS (id är lika med div-taggens id)
document.id.visibility = "show"
för att göra det synligt och
document.id.visibility = "hide"
för att göra det osynligt. I MSIE skriver man
id.style.visibility = "visible"
för att göra det synligt och
id.style.visibility = "hidden"
för att göra det osynligt. Här kan du se ett exempel på en bild som försvinner när man klickar på den. Här kan du se ett exempel på hur en osynlig bild lockas fram.

Positionering
I en vanlig html-sida visas de olika elementen i den ordning de kodas in och var och ett har sin plats/bredd/höjd på sidan. Mycket i dhtml bygger på att man positionerar element/lager, dvs anger vart de ska ligga på sidan när den laddas in samt att man ska kunna ändra dess positioner dynamiskt via script.
<img src="bild.gif" width=32 height=50 alt="Kevin" style="position: absolute; top: 10px; left: 50px">

Det som händer i exemplet ovan är att bilden placeras 10 pixlar från ovankanten (top) och 50 pixlar från vänsterkanten (left) och position: absolute anger att den ska placeras enligt de exakta koordinater som angivits och i förhållande till body-elementet, dvs räknat från övre vänstra hörnet ungefär som lagt kort ligger :). I nästlade lager är det föräldra-lagrets övre vänstra hörn som räknas, men det är lite överkurs men det kommer ett exempel nedan på det.

Dock fungerar inte detta i Netscape att lägga positioneringsanvisningarna direkt i elementet och därför är det bättre att använda en div-tagg som omsluter det element du vill positionera. Klicka här för ett se ett exempel.
<div id="pos" style="position: absolute; top: 10px; left: 50px">
<img src="bild.gif" width=32 height=50 alt="Kevin">
</div>

Nyttan med att ge div-taggen ett id kan du se i exemplet nedan och framförallt har du nytta av det om du senare ska manipulera med div-taggen via script.
<style type="text/css">
<!--
#pos { position: absolute; top: 250; left: 300 }
-->
</style>

Ovan postitionerar du div-taggen i en inbäddad style sheet-mall och lägger positioneringsanvisningarna där. Observera #-tecknet framför pos, vilket är i exemplet div-taggens id.
<div id="pos">
<img src="bild.jpg" width=32 height=50 alt="Kevin">
</div>

Vän av ordning kanske undrar skillnaden mellan position: absolute och position: relative? Om vi tar ett exempel på motsatsen position: relative så kanske det klarnar. Här är det vanlig text, här är texten 3 pt (punkter) nedanför och här är den vanlig igen. Trolleri? Nej, inte alls.

<span style="position: relative; top: +3pt">här är texten 3 pt (punkter) nedanför</span> och här är den vanlig igen.
Skillnaden är att position: relative följer övriga sidan, hade det stått position: absolut istället hade texten inom span-taggen funnits högst upp på sidan. Det kommer ett exempel nedan (nästlade lager) som du kan kika på lite mer vad som händer. I exemplet ovan såg du att det givetvis går att positionera i annat än px (pixlar), dock anges inget utan bara en siffra skrives antas det att det är px som gäller.

När det gäller att positionera element/lager finns förutom x- och y-axeln en tredje *dimension* - z-axeln vilket är den som avgör hur elementen *lägger* sig på varandra (bakåt och framåt), dvs i vilken ordning de visas om flera är lagda på varandra. Ett exempel, z-index: 3 (ju högre värde desto närmare betraktaren) och nyttan med detta kan vara att undvika att om man har många element att de oavsikligt placeras på varandra genom att ge dem olika olika z-index och styra ordningen på lagren om de överglappar/ligger på varandra.

Vad har jag för nytta av allt detta då? Förutom att jag kan exakt kan bestämma positonering av ett element/lager? Här är några exempel! Med hjälp av positionering och javascript kan man få en bild att röra sig över sidan, det kan du se här! Du kan givetvis lägga in mer än bara en bild som i exemplet ovan. Kika in här får du se! Du kan även nästla lager, kika här kan du se ett exempel och på samma sida beskrives hur clip: rect fungerar för att göra ett *titthål* i ett lager.

HTML-utbyte
HTML-utbyte innebär att det är möjligt att ändra text och bilder *on the fly* - fungerar bara i MSIE. Det hela går ut på att ett objekt skapas genom attributet id= i ett element och sedan byts det ut vid exempelvis en händelse. Det finns fyra egenskaper som kan användas, de jag kommer att beskriva är innerHTML samt innerText. Kika in här!

Några exempel

Läsa mer!

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML