Primer 47

DHTML - dinamično povečanje in zmanjšanje pisave

Izvorna koda HTML:		Rezultat izvedbe kode HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>DHTML - dinamično pozicioniranje, povecevanje in zmanjševanje ter sprememba vrste in barve pisave </title> <script type = "text/javascript"> var velikost = 5; // velikost pisave var stevec = 10; // zacetna velikost pisave var povecava = 1; // pisava se povecuje - povecava =1; pisava se zmanjsuje - povecava= -1 var prvaVrstica = "Besedilo se veča"; var vrstaPisave = [ "serif", "Arial", "Tahoma", "Times","Verdana" ]; var stevecVrstePisave = 0; function zazeni() { window.setInterval( "izvajaj()", 300 ); // vsakih 300 ms klici funkcijo izvajaj() } function izvajaj() { stevec += velikost; // povecevanje ali zmanjsevanje velikosti pisave if ( ( stevec % 400 ) == 0 ) { velikost *= -1; povecava = !povecava; document.getElementById('pText').style.color = ( velikost < 0 ) ? "red" : "blue" ; prvaVrstica = ( velikost < 0 ) ? "Besedilo se zmanjšuje" : "Besedilo se povečuje"; } document.getElementById('pText').style.fontFamily = vrstaPisave[ ++stevecVrstePisave % 3 ]; document.getElementById('pText').style.fontSize = stevec / 5+"px"; document.getElementById('pText').style.left =stevec+"px"; document.getElementById('pText').style.top = stevec/2+"px"; document.getElementById('pText').innerHTML = prvaVrstica + "<br /> Velikost pisave: " + stevec + "px"; } </script> </head> <body onload = "zazeni()"> <p id = "pText" style="position: relative; left: 0; top:0; font-family: serif; color: blue" _mce_style="position: relative; left: 0; top: 0; font-family: serif; color: blue;"> Pozdravljeni na spletni strani!</p> </body> </html>