Navigator 4 DHTML
As
early as
Navigator 2, JavaScript offered the possibility of altering the
content being delivered to a browser as a page loaded. It was
Navigator 3, however, that showed the first glimpse of what Dynamic
HTML could be. This browser implemented the IMG
HTML element as a document object whose SRC
attribute could be changed on the fly to load an entirely different
image file into the space reserved by the
<IMG> tag. In DHTML parlance, this is known
as a
replaced element because it is rendered as an inline element (capable
of flowing in the middle of a text line), yet its content can be
replaced afterward. The most common application of this replacement
feature is the
mouse rollover, in which an image is
replaced by a highlighted version of that image whenever the user
positions the cursor atop the image. If you surround the
<IMG> tag with a link
(<A>) tag, you can use the link’s
mouse event handlers to set the image
object’s source file when the cursor rolls atop the image and
when it rolls away from the image:
<A HREF="someURL.html"
onMouseOver="document.images['logo'].src = 'images/logoHOT.jpg'"
onMouseOut="document.images['logo'].src = 'images/logoNORMAL.jpg'">
<IMG NAME="logo" SRC="images/logoNORMAL.jpg" HEIGHT=40 WIDTH=80>
</A>At the time, this capability was a breakthrough that allowed dynamic content without the delay of loading a Java applet or rich media for a plug-in. Navigator 3 even allowed JavaScript to pre-cache all images on a page during ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access