Tag Archives: DHTML

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

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 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!

Event on Double click

Event on Double Click <html> <head> <script> function gettip(txt) { document.getElementById(‘tip’).innerHTML=’is about Create websites by using scripting technologies for the World Wide Web’; } </script> </head> <body> <p>Double click the “Paktutorial.com”</p> <table> <tr> <th valign=”top”>Paktutorial.com</th> <th> </th> </tr> </table> </body> </html> OUTPUT: Double click the “paktutorial.com” Paktutorial.com