Assignment GDB Solution: DHTML Examples

loading...

Text move on mouse cursor

Text move on mouse cursor <html> <head> <script> function cursor(event) { document.getElementById(‘trail’).style.visibility=”visible”; document.getElementById(‘trail’).style.position=”absolute”; document.getElementById(‘trail’).style.left=event.clientX+10; document.getElementById(‘trail’).style.top=event.clientY; } </script> </head> <body onmousemove=”cursor(event)”> <h1>Move the cursor over this page</h1> <span style=”visibility:hidden”>Cursor Text</span> </body> </html> CURSOR POSITION X Y COORDINATES OF WINDOWS: <html> <head> <script> function show_coords(event) { x=event.clientX; y=event.clientY; alert(“X coords: ” + x + “, Y coords: […]

Move Cursor Image

Move Cursor Image <html> <head> <script type=”text/javascript”> function cursor(event){ document.getElementById(‘trail’).style.visibility=”visible”; document.getElementById(‘trail’).style.position=”absolute”; document.getElementById(‘trail’).style.left=event.clientX+10; document.getElementById(‘trail’).style.top=event.clientY;} </script> </head> <body> <div onmousemove=”cursor(event)” width=”200px” height=”200px” style=”background:red”> <h1>Move the cursor over this Area</h1> <img id=”trail” style=”visibility:hidden” src=”paktutorial.png” width=”100″ height=”30″ ></div> </body> </html> DEMO HERE

Window Earthquake Effect

Window EarthQuake Effect <html> <head> <script> function startEQ() { richter=5; parent.moveBy(0,richter); parent.moveBy(0,-richter); parent.moveBy(richter,0); parent.moveBy(-richter,0); timer=setTimeout(“startEQ()”,10); }function stopEQ() { clearTimeout(timer); }</script> </head> <body> <form> <input onclick=”startEQ()” type=”button” value=”Start an earthquake”> <br /> <br /> <input onclick=”stopEQ()” type=”button” value=”Stop the earthquake”> </form> </body> </html> OUTPUT:

Dhtml Blink Text

DHTML Blink Text <html> <head> <script type=”text/javascript”> function blinking_header() { if (!document.getElementById(‘blink’).style.color) { document.getElementById(‘blink’).style.color=”red”; } if (document.getElementById(‘blink’).style.color==”red”) { document.getElementById(‘blink’).style.color=”black”; } else { document.getElementById(‘blink’).style.color=”red”; } timer=setTimeout(“blinking_header()”,100); } function stoptimer() { clearTimeout(timer); } </script> </head> <body onload=”blinking_header()” onunload=”stoptimer()”> <h1 id=”blink”>Blinking header</h1> </body> </html> View Output

DHTML Scroll Text

Dhtml Scroll Text <html> <head> <style> span {font:12px arial; background:#CCCCCC; position:absolute; width:100; height:500; top:100; clip:rect(0 100 100 0); } </style> <script> var interval; startPosition=0; topPosition=100; endPosition=100; speed=50; function scrollit() { if (startPosition!=200) { startPosition=startPosition+1; topPosition=topPosition-1; document.getElementById(‘display’).style.clip=”rect(” + (startPosition + 1) + ” 100 ” + (startPosition + endPosition) + ” 0)”; document.getElementById(‘display’).style.top=topPosition; interval=setTimeout(“scrollit()”,speed); } else […]

Dhtml Example Tooltip

Dhtml Example Tooltip <html><head> <script> function gettip(txt) { document.getElementById(‘tip’).innerHTML=txt; } function reset() { document.getElementById(‘tip’).innerHTML=””; } </script> </head> <body> <p>Mouse over these drinks:</p> <span onmouseout=”reset()”>Coffee</span> <br /><br /> <span onmouseout=”reset()”>Milk</span> <p id=”tip”></p> </body> </html> OUTPUT: Mouse over these drinks: Coffee Milk

Text Change Position

Text Change Position <html> <head> <script> function moveleft() { document.getElementById(‘header’).style.position=”absolute”; document.getElementById(‘header’).style.left=”0″; } function moveback() { document.getElementById(‘header’).style.position=”relative”; } </script> </head> <body> <h1 id=”header” onmouseover=”moveleft()” onmouseout=”moveback()”> Mouse over this text</h1> </body> </html> OUTPUT: Mouse over this text

Change Text On Mouse Over

Change Text On Mouse Over <html> <head> <script> function nameon() { document.getElementById(‘h2text’).innerHTML=”WELCOME!”; } function nameout() { document.getElementById(‘h2text’).innerHTML=”How are you today?”; } </script> </head> <body> <h2 onmouseout=”nameout()” onmouseover=”nameon()” ┬áid=”h2text”> Mouse over this text!</h2> </body> </html> Mouse over this text!