YOUR FIRST MOUSEOVER DYNAMIC HTML
As usual, if you have a problem, raise your hand. When you are done,
come to the TA or instructor and make sure you have your completion
of the lab recorded. Before you go, always log off your machine.
WHY NOT RUN BEFORE WE CAN WALK?
1. Since we all want to make web pages change when we move the mouse,
let's do that. We're going to start with a really boring
web page. Put this in a file and save it as html and view it
in a browser.
this is it! and this is not.
How does it look?
Mouse over the red text. Nothing happens. Yet.
2. Let's give this font tag a name. Call it foo. We do this by
inserting "id=foo" as a new attribute/value pair on the tag.
What? Well, here it is:
this is it! and this is not.
Mouse over the red text. Still nothing.
3. Let's make something happen. Add the attribute:
onmouseover=foo.color='green'
Try mouse over the red text. Wow!
4. You want to restore the original color on mouseout. Guess what
is needed here.
5. Let's add a change of size. Make the onmouseover attribute:
onmouseover=foo.color='green';foo.size='18pt'
Try it.
I want you to restore the size when you mouseout. Can you
get this to work correctly without our help?
6. That was a good test. Now I want you to download a web page
and have a look at its source. Just like last time, we're
going to alter the source. Choose a phrase you want to
add dynamics to.
Maybe you got a news page and the phrase "George Bush to
seek Governorship of Florida" somewhere.
Surround that text with a font tag that changes the color
to purple.
Does this show up in the browser after you save the altered
source file to the desktop?
7. Give the font tag an id, as before. foo is a perfectly good id.
8. Add your mouseover attribute, so the color changes. Test it.
9. Add your mouseout attribute. Does it work correctly? You can
change the colors to your taste now.
10. Show the TA. You're done!