| The entire DHTML language is fairly substantial. It contains keywords for all sorts of things – dynamic event handling, text substitution, dynamic element creation, and so on. A discussion of these is beyond the scope of this tutorial, but there are a few features that we can explore. |
| |
| An Example of innerHTML: |
| |
| |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>[Smart Cursor]</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT>
function moveMouse() {
eX=event.clientX;
eY=event.clientY;
CC.style.left=eX+8;
CC.style.top=eY;
di='<span style="background-color:#99CCFF; width:240">Welcome to
<font color=red>eBIZ.com</font> Pvt Ltd.';
eHc='</span></B>';
diC='<br />Current Mouse Postion : ';
if (event.srcElement.id=='D') {
eH='<B>';
}
else {
eH='';
eHc='';
}
CC.innerHTML=eH+di+'hello'+diC+eX+':'+eY+eHc;
}
</SCRIPT>
<META content="MSHTML 5.00.2314.1000" name=GENERATOR>
</HEAD>
<BODY onmousemove="javascript:moveMouse();" bgcolor="#0099FF">
<DIV id=D
style="BACKGROUND-COLOR: #00CCFF; HEIGHT: 200px; LEFT: 100px;
POSITION: absolute; TOP: 100px; WIDTH: 300px">
</DIV>
<P id=CC style="POSITION: absolute"></P>
</BODY>
</HTML>
|
| Click here to view the page. |
| |
| We create a DIV element that changes the cursor, and a P element that holds the cursor position. We call the script with the onmousemove event handler, which is fired every time the mouse moves. |
| |
| The moveMouse() function re-positions CC to the mouse pointer. We can detect the element that fired the mousemove event with event.srcElement. We read the id of this element, and respond. |
| |
| The idea is for the cool cursor to be rendered in bold if we are over the DIV. If we are over the DIV, then eH='<B>’, and eHc='</B>’. When we write the to innerHTML property, we either write: |
| |
| <B>x:y</B> |
| |
| if we are over the DIV, or just |
| |
| x:y |
| |
| if we are not over the DIV. |
| |
| The HTML is then parsed by the document, and you can see the change that occurs. |