<- <- Tillbaka!

På huvudsidan fanns detta exempel: Pröva att för musen över ordet DYNAMISKT
Här användes taggen span som är en del av Style Sheets - (används när man vill förändra en del av en text). Span-taggen har fått namngetts med id="andrafarg" och härmed blivit ett eget objekt. Händelehanteraren onMouseOver har använts som *trigger* och innerHTML blir följaktligen en egenskap till objektet vi skapade med id, andrafarg. När musen förs över ordet dynamiskt så kommer det som står inom strängen efter onMouseOver att ersätta ordet som omgetts av span. Som du kan se nedan i exempelkoden så kan man använda html-taggar inom strängen när det gäller innerHTML, glöm ej alla " samt ' och att skriva innerHTML exakt som det står här.
<span id="andrafarg" onMouseOver="andrafarg.innerHTML='<font color=red><b>DYNAMISKT</b></font>'">DYNAMISKT</span>

Samma exempel men förutom att byta färg så ändrar vi innehållet.
Pröva att för musen över ordet
DYNAMISKT
Eftersom vi redan har ett objekt id=andrafarg måste vi namnge detta andra exemel med ett eget unikt objekts-namn. Som du ser är det alltså det som står INOM strängen som ersätts via innerHTML, med html-formatering och allt.
<span id="andrafargex2" onMouseOver="andrafargex2.innerHTML='<size=4 color=blue><em>Ordet DYNAMISKT ersätts med denna sträng!</em></font>'">DYNAMISKT</span>

Har har vi ett stycke med text som jag vill förändra och utbyta mot en bild vid ett musklick. Texten kommer att försvinna och en bild på en snygg kille kommer istället :). Testa genom att klicka med musmarkören var som helst på texten inom detta stycke.

Koden för detta är som nedan, du kanske lägger märke till att de "-tecken du är van att skriva inom img inte behövs just här.
<p id="andratext" onClick="andratext.innerHTML='<img src=kevin01.gif width=84 height=111 alt=Kevin>'">sedan stycketexten här</p>

Egenskapen innerText fungerar som innerHTML men behandlar strängens innehåll som ren text, dvs du kan ej html-formatera inne i strängen. För den mer avancerade kan nämnas att givetvis kan man namnge ett id= till exempelvis ett stycke-element (p) och sedan i en funktion i ett script inom head anropa och utföra samma sak som i exempeln ovan.

<- <- Tillbaka!