Web Site Hosting Information - Your guide to website hosting

DHTML Lesson 2 - Continuing the Basics

DHTML Lesson 2 ’ The Basics Continued

In our previous lesson, we learned how to turn on the dynamic functionality of Netscape 4.0 using the tag. We will now cover proper syntax of DHTML in Netscape 4.0, as well provide a sample code that you can use to change the background colors of your web page. This will cause your background to change color for a set period of time.

The layer tag will need to be scripted into your page in order for the content to display properly. This is done by inserting: “document.layername” into your HTML.

For our example, we will use the effect we mentioned above to illustrate how you implement document.layername into your page.:

The above script tells Netscape 4.0 that the document’s background color should first be shown in yellow. Then, the function, changecol, tells the browser that it will need to change this color when the script specifies that it is time to switch the color.

This time frame is mentioned in the setTimeout tag. You can see the conditional statement, that if the document starts out in yellow, it will need to be changed to red when the set period of time has elapsed.

Feel free to fine tune any of the above code before placing it on your website. The variables can be easily changed. For example, you can add more than one color, change the amount of time before the new color displays, and start your background out with a different color.

Now that we have illustrated the proper syntax for using the dynamic features in Netscape 4.0, it is time to move on to Internet Explorer 4.0 and later. DHTML is handled differently in these browsers, so you will need to keep this in mind while creating your page.

The use of a browser detection script would be very helpful if you are concerned that some people may not be able to view your dynamic attributes. Then, you can have the visitor redirected to the proper page so that they can take advantage of all that your site has to offer.

Unfortunately, this does mean twice as much work for you, but we will illustrate in future tutorials how you can create cross-browser DHTML.

Related Posts:

DHTML Lesson 3 - Moving on to Internet Explorer

DHTML Lesson 5 ‘ A Cross Browser Scrollbar

DHTML Lesson 4 - Cross Browser DHTML

DHTML Lesson 1 - The Basics

Java Script Lesson 1 - The Basics

Posted on 12/27/05 1:32 AM

Be the first to comment!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website