I Love Code - Free Coding Tutorials and Resources

Introduction

This tutorial will be based on Document Object Model (DOM), which is a simple and effective way to manipulate documents and elements. It will require a basic understanding of HTML and some javascript will be handy too!

Starting Up

The standard use for DOM is for more advanced control of your webpage/HTML document, so lets start by making a simple webpage

Now lets introduce something we can control. We will also need to add in some form of styling, which can be done through a separate CSS file, CSS within the HTML file, or in the h4 tag. For this tutorial I’ll use the latter option.

So now we have a color that can be changed, and we’re going to use javascript to do so. The id=”change” is important for this, otherwise we wouldn’t have access to the specific h4 tag.
A javascript function will be created which uses document.getElementByID to alter the color of the text. This can be done with a few lines of simple code.

The document.getElementByID(”myId”) will be standard in any DOM. To determine the next bit requires a bit of common sense, or googling skills. For example, the font attribute is contained within an element in a style sheet, so will require (”myId”).style.font. However, an src attribute in an img tag is not defined in a style sheet, so only need (”myId”).src.

A function on its own won’t do anything, though. We need to have something to call it. In this example we are going to use onMouseOver in the h4 tag. It can also be done within javascript, which opens up many advanced effects to do with timing, and if statements.
The HTML for this, including onMouseOut (So it will revert back to the original color), is here.

(It will require an additional javascript function, seen later)
Basically, all I have done here is to include 2 attriutes. The first, onMouseOver, will activate the javascript function changecolor() when the mouse rolls over the text. The second is very similar, but activates when the mouse leaves the text.

If we compile all this together, we will get something like this:

And should look something like this:

Mouse off             Mouse on

Conclusion

Now, there are of course easier ways to do this, but I used this as a simple example. Any attribute can be changed through this method, and can be accessed through any language as it is a W3 standard. Personally, I use this feature often in bowtie themes that rely on timed events and if statements. I hope you enjoyed my first tutorial!

Related posts:

1. Getting started with HTML Introduction There’re many tools out there you can use...