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!

DHTML DOM innerText

<html>
<body>
<h1 id=”header”>Old Header</h1>
<script type=”text/javascript”> document.getElementById(“header”).innerHTML=”New Header”;
</script>
<p>”Old Header” was changed to “New Header”</p>
</body>
</html>

OUTPUT:

Old Header

“Old Header” was changed to “New Header”

Event onkeypress

Event onkeypress

The onkeypress event is triggered when the user presses a button on the keyboard. To trigger the onkeypress event, make sure that this window has focus.

<html>
<head>
<script>
function message()
{ alert(“This alert box was triggered when you pressed a button on your keyboard”); }
</script>
</head>
<body>
<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>

Event onkeydownup

Event onkeydownup

<html>
<head>
<script>
function color(color)
{ document.forms[0].myInput.style.background=color; }
</script>
</head>
<body>
<form> Write a message:<br />
<input onkeydown=”color(‘red’)”onkeyup=”color(‘blue’)” name=”myInput” size=”20″>
</form>
</body>
</html>

OUTPUT:

Write a message:

Event onkeyup

Event onkeyup

<html>
<head>
<script>
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 onkeyup=”writeMessage()” size=”20″>
<input name=”mySecondInput” size=”20″>
</form>
</body>
</html>

OUTPUT:

The onkeyup event occurs when the a keyboard key is on it’s way UP.

Write a message: