Dynamic HTML in its broadest sense refers to the ability to programmatically control the properties of an HTML document using JavaScript. The main tools we've shown are the getElementById function along with hyperlink activation, but it goes futher than this.
These browser event attributes (see HTML4.01 specification). The events refer to the so-called intrinsic events. Most attributes apply to all HTML elements.| onclick | mouse clicked in element |
| ondblclick | mouse double-clicked in element |
| onmousedown/onmouseup | mouse pressed/released in element |
| onmouseover | mouse over element |
| onmouseout | mouse not over element |
| onmousemove | mouse position changed within element |
| onkeydown/onkeyup | a key was pressed/released |
| onkeypress | a key was pressed, then released |
| onload/onunload | body or frameset element loaded/unloaded |
| onfocus/onblur | element acquires/loses focus by mouse click or tabbing (for elements a, area, label, input, textarea, button ) |
| onselect | text selected in a textfield (for elements input, textarea ) |
| onchange | control loses focus and value has been modified (for elements input, select, textarea ) |
<img id="myimg" src="some_image.gif" />
we can obtain the JavaScript object
using the getElementById function:
var myimg = document.getElementById( "myimg" );and then change the image to a new one with this statement:
myimg.src = "new_image.gif";
The usage of JavaScript-based image rollover is a very common feature of many web sites. A page contains an image file, often acting as a hyperlink. When the mouse moves over the image, a new (often similar) image replaces it; when the mouse moves off the image, the previous image returns.
As an example, we combine the image files yahoo_out.gif ()
and
yahoo_over.gif (
),
assumed to be in the same directory as the HTML source.
Both of these are downloadable from
this link.
The code looks like this:
<a href="http://www.yahoo.com">
<img border="0" src="yahoo_out.gif"
onmouseover="src='yahoo_over.gif';"
onmouseout="src='yahoo_out.gif';" /></a>
and the effect is this:
The image element (img) uses the image src attribute in conjunction with the onmouseover and onmouseout event attributes. Inside the one-statement attribute code, src plays a different role, acting as a JavaScript variable to which we assign values consisting of names of image files. Additionally observe that "=" has two roles, one within HTML to define the value of an attribute and secondly within JavaScript to define the value of a variable. Technically speaking, the code is more "correctly" written as follows:
<a href="http://www.yahoo.com">
<img border="0" src="yahoo_out.gif"
onmouseover="this.src='yahoo_over.gif'"
onmouseout="this.src='yahoo_out.gif'" /></a>
Where the object
thisrefers to the image element itself. JavaScript allows you to drop the "this." prefix. One can also write this code in our previous function-call style in which each event has its own function:
<head>
<script>
function over() {
var roll = document.getElementById("roll")
roll.src = "yahoo_over.gif"
}
function out() {
var roll = document.getElementById("roll")
roll.src = "yahoo_out.gif"
}
</script>
</head>
<body>
<a href="http://www.yahoo.com">
<img border="0" src="yahoo_out.gif" id="roll"
onmouseover="over()" onmouseout="out()" /></a>
</body>
A simple modification of the image rollover allows us to create similar behavior for arbitrary HTML elements. In place of the src variable used above, we can use the innerHTML variable to specify content of a particular element. Here is an example:
<div style="border:solid thin black;
width:200;height=100;padding:20"
onmouseover="innerHTML='Mouse Over'"
onmouseout="innerHTML='Mouse Out'">Mouse Out</div>
and the effect is this:
Mouse Out
and, when the mouse moves over the image we want this to appear:
Mouse Out
In this simple case, the code becomes complicated enough that it is in our best interests to use function calls for the mouse events as above. Here is the program:
Mouse Over
<html>
<head>
<title></title>
<script>
function over() {
var roll = document.getElementById("roll");
var caption = document.getElementById("caption");
roll.src = "yahoo_over.gif";
caption.innerHTML = "Mouse Over";
}
function out() {
var roll = document.getElementById("roll");
var caption = document.getElementById("caption");
roll.src = "yahoo_out.gif";
caption.innerHTML = "Mouse Out";
}
</script>
</head>
<body>
Here is the rollover image/caption combination
<p>
<img id="roll" src="yahoo_out.gif"
onmouseout="out()" onmouseover="over()" /><br />
<div id="caption" >Mouse Out</div>
</p>
</body>
</html>
The effects of this program can be seen
through this link.
<script type="text/javascript" src="mycode.js" ></script>
For example, the document in the above section might
be rewritten as these two files
(presumably in a folder at the same level):
| Revised document | File: mycode.js | |
|---|---|---|
<html>
<head>
<title></title>
<script type="text/javascript"
src="mycode.js"></script>
</head>
<body>
Here is the rollover image/caption
combination
<p>
<img id="roll" src="yahoo_out.gif"
onmouseout="out()"
onmouseover="over()" /><br />
<div id="caption" >Mouse Out</div>
</p>
</body>
</html>
|
function over() {
var roll = document.getElementById("roll");
var caption = document.getElementById("caption");
roll.src = "yahoo_over.gif";
caption.innerHTML = "Mouse Over";
}
function out() {
var roll = document.getElementById("roll");
var caption = document.getElementById("caption");
roll.src = "yahoo_out.gif";
caption.innerHTML = "Mouse Out";
}
|