DHTML Examples

CSS
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>
Change background colour
<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')"
bgcolor="blue">
</td>
<td onmouseover="bgChange('green')"
bgcolor="green">
</td>
</tr>
</table>
</body>
</html>
EVENTS
Onload
<html>
<head>
function mymessage()
{
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Onunload
<html>
<head>
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>
Onchange
<html>
<head>
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>
<option value="Firefox">Firefox</option>
</select>
</form>
</body>
</html>
Onsubmit
<html>
<head>
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>
Onreset
<html>
<head>
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>
Onselect
<html>
<head>
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>
onblur
<html>
<head>
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>
Onfocus
<html>
<head>
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>
Onkeydown
<html>
<head>
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>
Onkeyup
<html>
<head>
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>
Onkeydown vs onkeyup
<html>
<head>
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>
Onkeypress
<html>
<head>
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>
Onmouseover vs onmouseout
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Onclick
<html>
<head>
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>
Ondbclick
<html>
<head>
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>
Onmousedown and onmouseup
<html>
<head>
function lighton()
{
document.getElementById('myimage').src="bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>Click and hold to turn on the light!</p>
</body>
</html>
Onmousemove
<html>
<head>
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>
Disable rightclick
<html>
<head>
document.onmousedown=disable; //IE
message="Sorry no rightclick on this page.\nNow you cannot view my source\nand you cannot steal my images";
function disable(e)
{
if (e == null)
{ //IE disable
e = window.event;
if (e.button==2)
{
alert(message);
return false;
}
}
document.onclick=ffdisable; //FF
}
function ffdisable(e)
{
if (e.button==2)
{ //firefox disable
e.preventDefault();
e.stopPropagation();
alert(message);
return false;
}
}
</script>
</head>
<body>
<p>Right-click on this page to trigger the event.</p>
<p>Note that this does not guarantee that someone won't view the page source or steal the images.</p>
</body>
</html>
TEXT
Element access
<html>
<body>
<h1 onclick="this.style.color='red'">Click Me!</h1>
</body>
</html>
Attribute change
<html>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
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>
Innerhtmlaccess
<html>
<body>
<h1 id="header">Old Header</h1>
document.getElementById("header").innerHTML="New Header";
</script>
<p>"Old Header" was changed to "New Header"</p>
</body>
</html>
Changeinnerhtml
<html>
<head>
function nameon()
{
document.getElementById('h2text').innerHTML="WELCOME!";
}
function nameout()
{
document.getElementById('h2text').innerHTML="How are you today?";
}
</script>
</head>
<body>
<h2 id="h2text" onmouseout="nameout()"
onmouseover="nameon()">
Mouse over this text!</h2>
</body>
</html>
Change position
<html>
<head>
function moveleft()
{
document.getElementById('header').style.position="absolute";
document.getElementById('header').style.left="0";
}
function moveback()
{
}
</script>
</head>
<body>
<h1 id="header"
onmouseover="moveleft()"
onmouseout="moveback()">
Mouse over this text</h1>
</body>
</html>
Onmousemove
<html>
<head>
var i=1;
function moveright()
{
document.getElementById('header').style.left=i;
i++;
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header">
Move the mouse over this page
</h1>
</body>
</html>
Onload & onunload
<html>
<head>
var i=1
function starttimer()
{
document.getElementById('h_one').style.position="relative";
document.getElementById('h_one').style.left=+i;
document.getElementById('h_two').style.position="relative";
document.getElementById('h_two').style.top=+i;
i++;
timer=setTimeout("starttimer()",10);
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload="starttimer()" onunload="stoptimer()">
<h1 id="h_one">Header one</h1>

<h1 id="h_two">Header two</h1>
</body>
</html>

DHTML Examples

Uploaded by

Copyright:

Available Formats

DHTML Examples

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DHTML Examples

Uploaded by

Copyright:

Available Formats

CSS

<img id="myimage" onclick="changeimage()" border="0" src="bulboff.gif" width="100" height="180" />

<h1 id="h_one">Header one</h1>

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.