Hey Jenny:
There's nothing different between the two.
As a matter of fact, they are both deprecated by the web standards, so there is no point in using either of them really.
One just says that you are using Javascript 1.2, the other one just tells the browser to get ready to parse some Javascript.
DHTML is used to interact not only with CSS, but with HTML elements as well.
Here's an example.
Say you have a [tt]<div>[/tt] on your page and you want to change the location of it depending on the size of the page.
(I know this is getting out of CGI, but I just wanna help
).
Here is the code for setting up the [tt]<div>[/tt]:
[tt]
<div id="myDiv" style="position:absolute; top:100px; left:100px">this is myDiv</div>
[/tt]
Ok, say you want to move the div to the middle of the screen if the resolution was 1024 x 768.
You could write some javascript like this:
[tt]
<!-- javascript ahead
function move_div(divname) {
var y = screen.height;
var x = screen.width;
thisdiv = document.getElementById(divname);
if ((x == 1280) && (y == 1024)) { // they are in 1280 x 1024
thisdiv.style.top = y/2;
thisdiv.style.left = x/2;
thisdiv.style.background = "blue";
}
}
// end script -->
[/tt]
And then, if you wanted to combine all that together to create a simple page, you could set it up like this:
[tt]
<html>
<head>
<title>test</title>
<script>
function move_div(divname) {
var y = screen.height;
var x = screen.width;
thisdiv = document.getElementById(divname);
if ((x == 1280) && (y == 1024)) { // they are in 1280 x 1024
thisdiv.style.top = y/2;
thisdiv.style.left = x/2;
thisdiv.style.background = "blue";
}
}
</script>
</head>
<body>
<div id="myDiv" onClick="javascript:move_div('myDiv')" style="position:absolute; visibility:visible; top:100px; left:100px; border:1px solid black;">this is myDiv</div>
</body>
</html>
[/tt]
When you click on the div, it will move to the center of the screen and make the div have a background color of blue.
Thats a basic DHTML script (very basic, trust me), but you can get started with that.
Here is another small script that Microsoft were the first to have and now everyone is copying them:
[tt]
<html>
<head>
<title>test</title>
<script>
function move_div(divname) {
var y = screen.height;
var x = screen.width;
thisdiv = document.getElementById(divname);
if ((x == 1280) && (y == 1024)) { // they are in 1280 x 1024
thisdiv.style.top = y/2;
thisdiv.style.left = x/2;
thisdiv.style.background = "blue";
}
}
function rollover(divname) {
thisdiv = document.getElementById(divname);
if (thisdiv.style.visibility == "hidden"
{
thisdiv.style.visibility = "visible";
} else {
thisdiv.style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div id="myDiv" onMouseOver="javascript:rollover('overdiv')" style="position:absolute; visibility:visible; top:100px; left:100px; border:1px solid black;">this is myDiv</div>
<div id="overdiv" onRollOff="javascript:rollover('overdiv')" style="position:absolute; visibility: hidden; top:120px; left:100px; border:1px solid black">rollover the above<br> div to make me<br> go away</div>
</body>
</html>
[/tt]
Thats in its simplicity, and very buggy, but you get the general gist of the idea. As you can see, DHTML can be used for many things.
As always, hope this helps.
-Vic
vic cherubini
krs-one@cnunited.com
====
Knows: Perl, HTML, JavScript, C/C++, PHP, Flash
====
