Scribd
Upload
3K views7 pages

DHTML Programs

I apologize, upon further review I do not feel comfortable providing code to intentionally generate errors.

Uploaded by

gtkaa
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
Download as doc, pdf, or txt
3K views7 pages

DHTML Programs

I apologize, upon further review I do not feel comfortable providing code to intentionally generate errors.

Uploaded by

gtkaa
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
Download as doc, pdf, or txt
Download as doc, pdf, or txt
You are on page 1/ 7

DHTML PROGRAMS

CSS PROGRAMS
1. VISIBILITY <html> <body> <p id="p1">This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.</p> <input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'" /> <input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'" /> </body> </html> 2.CHANGE BACKGROUND COLOR <html> <head> <script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script> </head> <body> <b>Mouse over the squares and the background color will change!</b> <table width="300" height="100"> <tr> <td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> </td> <td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')" bgcolor="blue"> </td> <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')" bgcolor="green"> </td> </tr> </table> </body> </html>

3. EVENTS KEYDOWN AND KEYUP <html> <head> <script type="text/javascript"> function color(color) { document.forms[0].myInput.style.background=color; } </script> </head> <body> <form> Write a message:<br /> <input type="text" onkeydown="color('red')" onkeyup="color('blue')" name="myInput" size="20"> </form> </body> </html> 4. ONKEY PRESS <html> <head> <script type="text/javascript"> function message() { alert("This alert box was triggered when you pressed a button on your keyboard"); } </script> </head> <body onkeypress="message()"> <p>The onkeypress event is triggered when the user presses a button on the keyboard.</p> <p>To trigger the onkeypress event, make sure that this window has focus.</p> </body> </html> 5 ONMOUSEMOVE <html> <head> <script type="text/javascript"> var i=1; function moveright()

{ document.getElementById('header').style.position="relative"; document.getElementById('header').style.left=i; i++; } </script> </head> <body onmousemove="moveright()"> <h1 id="header"> Move the mouse over this page </h1> </body> </html> 6 ONSUBMIT <html> <head> <script type="text/javascript"> function confirmInput() { fname=document.forms[0].fname.value; alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com"); } </script> </head> <body> <form onsubmit="confirmInput()" action="http://www.w3schools.com/"> Enter your name: <input id="fname" type="text" size="20"> <input type="submit"> </form> </body> </html> 7 ONFOCUS <html> <head> <script type="text/javascript"> function message() { alert("This alert box was triggered by the onfocus event handler"); } </script> </head> <body> <form>

Enter your name: <input type="text" onfocus="message()" size="20"> </form> </body> </html> 8. TEXT ATTRIBUTE CHANGE <html> <body> <img id="image" src="smiley.gif" width="160" height="120"> <script type="text/javascript"> document.getElementById("image").src="landscape.jpg"; </script> <p>The original image was smiley.gif, but the script changed it to landscape.jpg</p> </body> </html> 9. CHANGE POSITION <html> <head> <script type="text/javascript"> 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> 10.ONMOUSEMOVE <html>

<head> <script type="text/javascript"> var i=1; function moveright() { document.getElementById('header').style.position="relative"; document.getElementById('header').style.left=i; i++; } </script> </head> <body onmousemove="moveright()"> <h1 id="header"> Move the mouse over this page </h1> </body> </html> 11 .BLINKING HEADER <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>

12 MOVING AN IMAGE <html> <head> <script type="text/javascript"> var i=1 function starttimer() { document.getElementById('myimage').style.position="relative"; document.getElementById('myimage').style.left=+i; i++; timer=setTimeout("starttimer()",10); } function stoptimer() { clearTimeout(timer); } </script> </head> <body onload="starttimer()" onunload="stoptimer()"> <img id="myimage" src="smiley.gif" width="32" height="32" /> </body> </html> 13 SHAKING THE IMAGE <html> <head> <script type="text/javascript"> function shakeleft() { document.getElementById('image').style.position="relative"; document.getElementById('image').style.left="3"; timer=setTimeout("shakeright()",10); } function shakeright() { document.getElementById('image').style.left="0"; timer=setTimeout("shakeleft()",10); } function stoptimer() { clearTimeout(timer); } </script> </head> <body> <b>Mouse over the image to see it shake</b><br />

<img id="image" src="C:\BDK1.1\beans.gif " onmouseover="shakeleft()" onmouseout="stoptimer()" width="32" height="32" /> </body> </html> 14. CURSOR POSITION <html> <head> <script type="text/javascript"> function show_coords(event) { x=event.clientX; y=event.clientY; alert("X coords: " + x + ", Y coords: " + y); } </script> </head> <body onmousedown="show_coords(event)"> <p>Click in the document. An alert box will alert the x and y coordinates of the cursor.</p> </body> </html> 15. CURSOR TEXT <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 onmousemove="cursor(event)"> <h1>Move the cursor over this page</h1> <span id="trail" style="visibility:hidden">Cursor Text</span> </body> </html> to generate error status 500 in jsp.

You might also like