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="[Link]('p1').[Link]='hidden'" /> <input type="button" value="Show text" onclick="[Link]('p1').[Link]='visible'" /> </body> </html> [Link] BACKGROUND COLOR <html> <head> <script type="text/javascript"> function bgChange(bg) { [Link]=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) { [Link][0].[Link]=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()
{ [Link]('header').[Link]="relative"; [Link]('header').[Link]=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=[Link][0].[Link]; alert("Hello " + fname + "! You will now be redirected to [Link]"); } </script> </head> <body> <form onsubmit="confirmInput()" action="[Link] 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="[Link]" width="160" height="120"> <script type="text/javascript"> [Link]("image").src="[Link]"; </script> <p>The original image was [Link], but the script changed it to [Link]</p> </body> </html> 9. CHANGE POSITION <html> <head> <script type="text/javascript"> function moveleft() { [Link]('header').[Link]="absolute"; [Link]('header').[Link]="0"; } function moveback() { [Link]('header').[Link]="relative"; } </script> </head> <body> <h1 id="header" onmouseover="moveleft()" onmouseout="moveback()"> Mouse over this text</h1> </body> </html> [Link] <html>
<head> <script type="text/javascript"> var i=1; function moveright() { [Link]('header').[Link]="relative"; [Link]('header').[Link]=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 (.[Link]) { [Link]('blink').[Link]="red"; } if ([Link]('blink').[Link]=="red") { [Link]('blink').[Link]="black"; } else { [Link]('blink').[Link]="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() { [Link]('myimage').[Link]="relative"; [Link]('myimage').[Link]=+i; i++; timer=setTimeout("starttimer()",10); } function stoptimer() { clearTimeout(timer); } </script> </head> <body onload="starttimer()" onunload="stoptimer()"> <img id="myimage" src="[Link]" width="32" height="32" /> </body> </html> 13 SHAKING THE IMAGE <html> <head> <script type="text/javascript"> function shakeleft() { [Link]('image').[Link]="relative"; [Link]('image').[Link]="3"; timer=setTimeout("shakeright()",10); } function shakeright() { [Link]('image').[Link]="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\[Link] " onmouseover="shakeleft()" onmouseout="stoptimer()" width="32" height="32" /> </body> </html> 14. CURSOR POSITION <html> <head> <script type="text/javascript"> function show_coords(event) { x=[Link]; y=[Link]; 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) { [Link]('trail').[Link]="visible"; [Link]('trail').[Link]="absolute"; [Link]('trail').[Link]=[Link]+10; [Link]('trail').[Link]=[Link]; } </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.
