Practice 10 - COIN 70a

EVENTS and IMAGES

LOAD and UnLOAD - CODE

<body onload="alert('Welcome, ' + visitorName+'! \n\n This welcome message was created by
an onLoad event in the BODY tag...');" onunload="alert('Bye ' + visitorName +
'! Thanks for visiting!!\n\n This farewell was created by an
unLoad event in the BODY tag...')";>
Marley the Movie

Image Rollover CODE

<img id="movie1" name="movie1" src="marley.jpg" width="100px" height="150px"
border="1px" alt="Marley the Movie" onmouseover="document.movie1.src='milk.jpg'"
onmouseout="document.movie1.src='marley.jpg'" />
Link to Nowhere

Confirm Event CODE

<a href="javascript: void(0);" onclick="return confirm ('Do you really want
to leave?')">Link to Nowhere</a>
Link to Martha's Part 4 FORM

<a href="practice10-part4.html" onclick="return confirm('Are you ready?')">Link to
Martha's Part 4 FORM</a>

Assignment:

1. Create a new document which uses a load event to welcome the user to the page and then tells them goodbye when they leave the page.
2. Create an image rollover which uses these two current movie images (or use your own images). Remember, for best results, images should be the same size.
3. On the page with the load and unload events (#1 above), create a link to go somewhere else. When the link is clicked, give the user a confirm dialog box that asks if they reeeeeaaaallllly want to leave the page before you let them go. Note: if they confirm that they do want to leave, they should still get the unload event.
4. Create a brief form that asks the user to fill in a few bits of information. If you have time, be creative. When the user first arrives at the page, give the first form input box focus. When the user finishes filling out the form and clicks Submit, give them an alert to thank them for filling it out. If they click Reset, confirm that they really want to reset the form before doing so.

BACK