logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Introduction to Dynamic HTML - DHTML

Guest Author - Diane Cipollo

Just what is Dynamic HTML? First, it isn't a programming language in the purest sense. DHTML is a combination of three things; Cascading Style Sheets, JavaScript and the DOM. The CSS is used to control the appearance and positioning of parts of a webpage. JavaScript is a client-side scripting language that causes things to happen on the webpage. The DOM is the blueprint of the webpage. Let's say you want to use DHTML to add a chaser to the mouse cursor. This is a small image that follows your mouse cursor over the webpage.

DOM

We need a way to tell when the mouse cursor moves. We can do this with the Document Object Model, or DOM, which is a method of naming everything on a webpage just as a blueprint names every part of a house. For example, if you wanted to know when someone opens (move) the window in the kitchen of your house, you would say house.kitchen.onwindowmove. The DOM document.onmousemove works the same way to identify the movement of the mouse.

CSS

In order for the chaser image to follow the mouse cursor around the webpage, we need to reposition the chaser image each time the mouse moves. We will use the positioning feature of Cascading Style Sheets to do that. We will use CSS to tell the browser to always keep the chaser image a certain distance from the mouse cursor. Therefore when the mouse moves, so will the chaser.

JavaScript

We want the chaser image to move only when the mouse moves so we need to program this on the webpage. We can use a scripting language, a small programming language, to tell the web browser how to respond when something happens (when an event occurs) on the webpage. We will use JavaScript to do this. In our example, the event is the movement of the mouse cursor (onmousemove). So we will program the web browser to respond to the onmousemove event by repositioning the chaser image according to the CSS instructions.

A Note of Caution

You can use DHTML to do some cool things on your webpages which can be a lot of fun for you and your readers. However, you need to keep in mind that each web browser is different and the cool effect you are programming may work differently, or not at all, in some web browsers. For example, the mouse chaser will not work in the Firefox browser.




This site needs an editor - click to learn more!

Add Introduction+to+Dynamic+HTML+%2D+DHTML to Twitter Add Introduction+to+Dynamic+HTML+%2D+DHTML to Facebook Add Introduction+to+Dynamic+HTML+%2D+DHTML to MySpace Add Introduction+to+Dynamic+HTML+%2D+DHTML to Del.icio.us Digg Introduction+to+Dynamic+HTML+%2D+DHTML Add Introduction+to+Dynamic+HTML+%2D+DHTML to Yahoo My Web Add Introduction+to+Dynamic+HTML+%2D+DHTML to Google Bookmarks Add Introduction+to+Dynamic+HTML+%2D+DHTML to Stumbleupon Add Introduction+to+Dynamic+HTML+%2D+DHTML to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor