Professional Documents
Culture Documents
in
“Jh x.ks'kk; ue%“
2. Position - Absolute
<html> <head> <style>
h1.x{position:absolute;left:100px;top:150px;}
</style>
</head>
<body>
<h1 class="x">This is a heading</h1>
3. Visibility
<html> <head> <style>
h1.one{visibility:visible;}
h1.two{visibility:hidden;}
</style>
</head>
<body>
<h1 class="one">Heading one</h1>
<h1 class="two">Heading two</h1>
<p>Where is heading two?</p>
</body> </html>
4. Z Index
<html> <head> <style>
img.x{position:absolute;left:0px;top:0px;z-index:1;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body> </html>
5. Cursors
<html> <body>
<p>Move the mouse over the words to see the cursor change</p>
<span style="cursor: auto">Auto</span><br>
<span style="cursor:
crosshair">Crosshair</span><br>
<span style="cursor:default">Default</span><br>
<span style="cursor:pointer">Pointer</span><br>
<span style="cursor:hand">Hand</span><br>
<span style="cursor:move">Move</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: wait">wait</span><br>
<span style="cursor: help">help</span><br>
</body> </html>
6. Watermark
<html> <head> <style>
body{background-attachment: fixed;background-image: url("bulboff.gif");background-repeat:
no-repeat;}
</style>
</head>
<body>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p>
</body> </html>
7. 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>
13. Onload
<html> <head>
<script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the
onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
14. Onunload
<html> <head>
<script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the
onunload event");
}
</script>
</head>
<body onunload="mymessage()">
<p>An alert box will display a message when you close this document!</p>
</body> </html>
15. Onchange
<html> <head>
<script type="text/javascript">
function preferedBrowser()
{
prefer=document.forms[0].browsers.value;
alert("You prefer browsing internet with " +
prefer);
}
</script>
</head>
<body>
<form>
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Internet Explorer">Internet Explorer
<option value="Netscape">Netscape Navigator
</select>
</form>
</body> </html>
16. 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>
17. Onreset
<html> <head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the
onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20"> <input type="reset">
</select>
</form>
</body> </html>
18. Onselect
<html> <head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered when you selected the content of the input field");
}
</script>
</head>
<body>
<p>Select the content in the input field</p>
<form>
<input type="text" value="Select this text" onselect="message()" size="20">
</form>
</body> </html>
19. Onblur
<html> <head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the onblur event handler");
}
</script>
</head>
<body>
<p>The onblur event occurs when an element loses focus. Try to click or write in the input
field below, then click elsewhere in the document so the input field loses focus.</p>
<form>
Enter your name: <input type="text" onblur="message()" size="20">
</form>
</body> </html>
20. 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>
21. Onkeydown
<html> <head>
<script type="text/javascript">
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
</script>
</head>
<body>
<p>The onkeydown event occurs when the a keyboard key is on it's way DOWN.</p>
<form>
Enter your name: <input type="text" name="myInput" onkeydown="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</select>
</form>
</body> </html>
22. Onkeyup
<html> <head>
<script type="text/javascript">
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
</script>
</head>
<body>
<p>The onkeyup event occurs when the a keyboard key is on it's way UP.</p>
<form>
Write a message:<br>
<input type="text" name="myInput" onkeyup="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</form>
</body> </html>
23. Onkeypress
<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>
25. Onclick
<html> <head>
<script type="text/javascript">
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('myimage').src="bulbon.gif";
}
else
{
cc=0;
document.getElementById('myimage').src="bulboff.gif";
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeimage()" border="0" src="bulboff.gif" width="100"
height="180">
<p>Click to turn on/off the light</p>
</body> </html>
26. Ondoubleclick
<html> <head>
<script type="text/javascript">
function gettip(txt)
{
document.getElementById('tip').innerHTML='W3Schools is about WEB standards, and
scripting technologies for the World Wide Web';
}
</script>
</head>
<body>
<p>Double click the "W3Schools.com"</p>
<table>
<tr>
<th ondblclick="gettip()" valign="top">W3Schools.com</th> <th id="tip"> </th>
</tr>
</table>
</body> </html>
28. 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>
30. Tooltip
<html> <head>
<script type="text/javascript">
function gettip(txt)
{
document.getElementById('tip').innerHTML=txt;
}
function reset()
{
document.getElementById('tip').innerHTML="";
}
</script>
</head>
<body>
<p>Mouse over these drinks:</p>
<span onmouseover="gettip('Hot black drink')" onmouseout="reset()">Coffee</span>
<br><br>
<span onmouseover="gettip('Cold white drink')" onmouseout="reset()">Milk</span>
<p id="tip">INFOTECH</p>
</body> </html>
31. Typewriter
<html> <head>
<script type="text/javascript">
message="The best way to learn, is to study examples. –http://infotechksg.weebly.com”
pos=0;
maxlength=message.length+1;
function writemsg()
{
if (pos<maxlength)
{
txt=message.substring(pos,0);
document.forms[0].msgfield.value=txt;
pos++;
timer=setTimeout("writemsg()",50);
}
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload="writemsg()" onunload="stoptimer()">
<form>
<input id="msgfield" size="65">
</form>
</body> </html>
33. Menu 1
<html> <head> <style>
span {border:groove 2px;padding:3px;font-family:arial;font-
size:12px;width:100px;height:70px;background-
color:#c0c0c0;position:relative;top:-80px;left:-10px;}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
elmnt.style.top="-15px";
}
function hidemenu(elmnt)
{
elmnt.style.top="-80px";
}
</script>
</head>
<body>
<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<a href="/default.asp">HOME</a><br>
<a href="/js/default.asp">JavaScript</a><br><br><hr>INFOTECH Computer Education<br>
</span>
<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<p></p>
<p></p>
<p> <a href="http://www.microsoft.com"> Explorer</a> <br>
<a href="http://my.netscape.com">Navigator</a> <br><br></p>
<hr />
Browser<br>
</span>
<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<p></p>
<p></p>
<p>
<a href="http://www.altavista.com">Alta Vista</a><br>
<a href="http://www.yahoo.com">Yahoo!</a><br><br></p>
<hr>
Search<br></span>
</body> </html>
38. Inset
<html> <head>
<script type="text/javascript">
function inset(elmnt)
{
elmnt.style.border="inset 2";
}
function outset(elmnt)
{
elmnt.style.border="outset 2";
}
</script>
<style>
td{background:C0C0C0;border:2px outset;}
</style>
</head>
<body>
<table width="80">
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a
href="a1.html">HOME</a></td></tr>
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a
href="a2.html">JavaScript</a></td></tr>
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a
href="a3.html">Explorer</a></td></tr>
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a
href="a4.html">Navigator</a></td></tr>
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a
href="a5.html">AltaVista</a></td></tr>
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="a6.html">Yahoo!
</a></td></tr>
</table>
</body> </html>
('myMenu').style.left=i;
}
}
function hide()
{
if (i>-135)
{
i=i-speed;
document.getElementById
('myMenu').style.left=i;
}
}
</script>
</head>
<body>
<table id="myMenu" class="nav" width="150" onmouseover="showmenu()"
onmouseout="hidemenu()">
<tr><td class="menu"><a href="/default.asp">HOME</a></td>
<td rowspan="5" align="center" bgcolor="#FF8080">M<br>E<br>N<br>U</td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
</table>
<p>Mouse over the MENU to show/hide the menu</p>
<p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p>
</body> </html>