Although Dynamic HTML seems lively, in fact, the entire Web is still almost static. Of course, some of the more avant-garde websites have had some interactive content for some time, but most of them are still implemented using plug-ins or by writing multiple pages for different versions of browsers. For most web page producers, even if they want to write multiple versions of a page, it is difficult for them to have the time. In addition, web pages that can achieve interactive effects usually require high bandwidth. The webpage is unacceptable to both the author and the viewer. However, it doesn't have to be this way. Here, you can learn a quick and easy way to add DHTML effects to web pages under low bandwidth conditions. This is the method of mouseovers. This method does not require loading any images or Write multiple pages.
Better Mouse Capture Information
Mouseover is one of the most widely used and effective dynamic methods on the Web, and a good reason is that it allows the viewer to get clear, direct feedback. Think of it like this: Move the mouse over a hypertext link and the link will become highlighted, change color, or otherwise change to say "I am a link!"
This does not mean that all mouseover links created are the same. They are different. The worst situation is that mouseover links are implemented in Java language or special formats, such as Macromedia's Shockwave format, which requires the viewer to install a plug-in to see the effect. The best case scenario is that mouseover links are written in JavaScript that is supported by all browsers. But even if it is implemented with JavaScript, it still requires the browser to load two images, one for high-brightness and one for normal display, which is a waste of bandwidth utilization.
Now let's look at DHTML, which creates mouseover links without loading any images. The only thing to note is that the DHTML code needs to be opened by the browser to open Web page objects, such as links and styles, so that they can be described by the Document Object Model (DOM). In other words, the code currently only works in Internet Explorer 4.0. However, Netscape's fifth-generation browser (expected to be released by the end of this year) will fully support DOM. Also, don't worry about mouseover links being used in incompatible browsers; browsers that don't support the DHTML code in the page will simply ignore them. (For details, please see the "Let the DOM work on your website" section later.)
Code
Ordinary Web pages are divided into two main areas: one is the content area, and the other is the navigation area. Mouseover links usually appear in the navigation area. Typically, highlighted buttons are used to direct viewers to different areas of the site, such as site graphics or feedback pages. Instead of using buttons, we are going to turn ordinary text links into interactive mouseover links. The method is: first insert ordinary text links into the document, such as:
< a href="contact_us.html">
Contact Us< /a>
The second step changes the color of the text link when the mouse moves over it. The DHTML script program is as follows:
function rollon( ){
if (window.event.
srcElement.tagName == "A"){
window.event.srcElement.
style.color = "red";}
}
function rolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover = rollon;
document.onmouseout = rolloff;
Place this code in a pair of < In the middle of the script> tag, insert it into the <head> of the Web page, and you can immediately achieve the mouseover effect on each text link. Below we analyze in detail how this is achieved.
The script program written earlier defines two key functions: rollon (activated when the mouse moves over the link) and rolloff (activated when the mouse moves away from the link). Each function starts with a simple 'if' statement, which means: every time the onmouseover event is called in the Web document, the rollon function will notify the browser to determine whether the object activating the event is an Anchor tag (window.event .srcElement.tagName == "A"). If so, the script will apply a special style (red in this case) to the link. Similarly, when the onmouseout event occurs, the rolloff function will return the style to its default color (color="").
The last two lines of this script notify the browser to execute the rollon function when the onmouseover event occurs and to turn off the mouseover link (mouseover) function when the onmouseout event occurs.
Get twice the result with half the effort
Internet Explorer 4.0 allows you to use DHTML to control every object in the document. Naturally, you can achieve more functions besides changing the color of the Anchor tag. In fact, you can apply any element from Cascading Style Sheets (CSS, a W3C standard formatting specification) to any type of object or resource component. For example, in addition to making a link appear red, you can also add or remove underlining from it.
To remove the underline, simply insert the following style attribute into all anchor tags on the page:
style = "text-decoration: none"
This statement will remove the underline from the link, making it appear normal or default state. (By default, Internet Explorer 4.0 and Navigator 4.0 underline all text links. The above statement will change the default state of these links one by one.)
Then, add the following statement below the rollon function:
window.event. srcElement.style.
textDecoration = "underline";
Now, the resource for the mouseover event you defined will turn red and have an underline style. It should be noted that the underline can be removed by adding the following statement to the rolloff function:
window.event.srcElement.style.
textDecoration = "none";
The above modification functions that can be implemented quickly show the power of a simple DHTML script program. It does not require loading any images, but uses a highly flexible and portable code to produce eye-catching visual effects. I can say that you can use it to access any document, even in older browsers. An error occurs. If you want to get this code and master it yourself, please visit our website: www.windowspro.com .
-------------------
Edward Grossman is the producer of www.windowspro.com website. He has a Ph.D. in philosophy and was engaged in research in the field of philosophy before the emergence of the Web. His E-mail: [email protected]
Just add about 15 lines of code to the ①head of the document, and you can turn ②normal text links on any Web page into ③interactive mouse-activated links (mouseover).
------------
Make DOM work on your website.
With Dynamic HTML (DHTML), object-oriented programming is no longer something only programming experts can do, it is becoming everyone's An area that even experienced web page makers can get involved in. This is largely thanks to the Document Object Model, or DOM. This W3C specification treats every component in a document as an object, whether it's a document, a style, or a link. Scripts can modify these objects based on user input, browser type, or many other variables, including changing the size, changing the style, or updating the link.
DOM can open an entire document, allowing web authors to create highly customizable interactive pages without imposing large download overhead on users. This not only enables low-bandwidth mouseover links, but also enables collapsible web browsing menus and movable page components (such as images, text blocks, etc.).
For more information about the DOM, please visit the sites: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ , and developer.netscape.com/docs/manuals/communicator/dynhtml/.
For examples of DHTML applications, visit: www.windowspro.com and www.projectcool.com (try dragging Saturn around) and browse the "View source".
In IE 4.0, you can use Dynamic HTML to operate dozens of objects. A detailed list is available at www.microsoft.com .