May 20, 1997
Dynamic HTML lesson 1
The onmouseover and onmouseout events
If you're looking to use dynamic HTML to spice up your web page with some Dynamic HTML, you could certainly do worse than using the onmouseover and onmouseout events. The onmouseover event is triggered when the user moves the mouse over an object, and the onmouseout event is triggered when a user moves the mouse outside of the object.
An object is defined using ID. For instance, we could set a certain font flag to have the ID of FONT1 by using the code:
<FONT ID="FONT1">
Once an object has its ID, we can then use that in a script to change the features of that object. I'll start off with a simple example. Lets start by making some text change color when we move over it. To do this, we'll need to create a normal page with a script at the top, and some text which is defined by a font flag. For instance:
| <HTML> | | | <HEAD><TITLE>A PAGE WITH DYNAMIC COLOR CHANGING TEXT</TITLE> | | | </HEAD> | | | <BODY TEXT="#000000" BGCOLOR="#FFFFFF"> | This sets our text as black and out background as white | | <SCRIPT LANGUAGE=VBSCRIPT> | This tells the browser that the following HTML is a script, and is written in VBSCRIPT | | | | | SUB FONT1_onmouseover | This tells the browser that the following list is what we want it to do when we mover over FONT1 | | FONT1.color="red" | This tells the browser to make FONT1 red | | end sub | This tells the browser we've finished the list of what we want it to do | | SUB FONT1_onmouseout | This tells the browser that the following list is what we want it to do when we move off FONT1 | | FONT1.color="black" | This tells the browser we want to make FONT1 black | | end sub | This tells the browser we've finished the list of what we want it to do. | | | | | </SCRIPT> | This tells the browser that we've finished our script and we're back to normal HTML | | | | | <FONT ID="FONT1">This text will change red when I move over it</FONT> | This is the text we want to change color, and it has been given the ID of FONT1 | | | | | </BODY> | | | </HTML> | |
When you've finished that page, you get something like this:
This text will change red when I move over it
The above text, if you have Internet Explorer Version 4, will change color when you move your mouse over it It is possible to do this with any text you want, but bear in mind you should never have more than one object named the same thing.
I'm going to become a little more adventurous now and do the same colour changing thing with links. The script is a little different now, but not much. We'll also get the status bar at the bottom of the browser to display a little bit of information about the link when the user moves over it. Here's the script you would use:
| <HTML> | | | <HEAD><TITLE>A page with cool Dynamic links on it</TITLE></HEAD> | | | <BODY TEXT="#000000" BGCOLOR="#FFFFFF"> | Set the text to black and background to white | | <SCRIPT LANGUAGE=VBSCRIPT> | Start the script | | | | | SUB LINK1_onmouseover | Start the list for when we move over the link | | document.anchors("LINK1").style.color="#FF0000" | Say we want links with an ID of LINK1 to change red | | window.status="A link to Ben's Home Page" | Say we want the status bar to read the text in inverted commas | | End Sub | End the list | | SUB LINK1_onmouseout | Start the list for when we move off the link | | document.anchors("LINK1").style.color="#000000" | Say we want links with an ID of LINK1 to turn black | | window.status="" | Say we want the status bar to read nothing | | End Sub | End the list | | | | | </SCRIPT> | End the script | | | | | <A HREF="http://www.bkitt.demon.co.uk/" ID="LINK1">A link to Ben's Home Page</A> | Make a link to the page you wish, and give it an ID (in this case LINK1 as we have used that in our script) | | | | | </BODY> | | | </HTML> | |
Once you've done that, you get something like this:
A link to Ben's Homepage
You can change the ID's, the links and the colors to suit your needs. That pretty much concludes todays lesson. Try playing about with the scripts and seeing what else you can get to change. You can change anything that has an ID. You could make a script, for instance, which would allow people to choose what width they would like their Horizontal Rulers to be! Give it a go, and if you need any help, you can mail me or post a message here on the HTML page asking me. If you want some more examples of Dynamic HTML, you can visit my page at the link above which contains some extra dynamic HTML, or visit the Site Builder Network which you'll find as one of the links to the right.
If you create a cool DHTML page, mail me the URL, I'd love to see them. Who know...you may even get a link :)
See ya until next time :)
Ben
|
Sitebuilder Network
A great place to find help with HTML and Web Design
Beginner's guide to HTML
An excellent beginner's guide to HTML from NCSA
Web Page Design
A brilliant guide to how to put Web Pages together.
Guide to HTML
Another good beginner's guide to HTML. Does not include the latest standards.
Hotdog Web Page Creator
The place to find info on and download Hotdog - possibly the best HTML editor in the world....
|
HTML News and Tips
