Monday 12 -17: day3 in HTML design part 3

Now that you have set up your DIVs, I would like you to apply some event handlers to them. If you recall, an event handler makes it possible for various parts of your webpage to respond to events that take place. In this case, the events we are going to handle will be:

ONMOUSEOVER
ONMOUSEOUT

Here is what you need to do


A) Get back into your code

B) click right after where it says  top:10"  but BEFORE the little pointy thing

C) Hit Enter (Oh wait, its a Mac, hit the Return key)

D) on the next line, type in these two lines of code:


ONMOUSEOVER = "this.style.border = 'dashed'  "
ONMOUSEOUT  = "this.style.border = 'solid'  "

E) Please be extremely careful about yping in the single quotes vs the double quotes. Does it make a difference? Yer darned tootin' it makes a difference!

F) SAVE your code, REFRESH your browser, see what happens when you put the mouse arrow over that first DIV. If it works, the border should change when you put the mouse arrow over it, then change back when you pull the mouse arrow away

G) Once it works, you can apply a similar change to your other DIVs. There are many border styles available, including:

dotted
double
dot-dash
groove
ridge
inset
outset
wave
dot-dot-dash

I haven't checked them all out in every browser out there, but they mostly should most of the time work

Cheers,
Mr. L