HTML and CSS Reference
In-Depth Information
value. For example, the hypertext link for the services.html page should be
modified as follows:
<a href="services.html"
onmouseover="document.services.src='serviceson.gif'"
onmouseout="document.services.src='services.gif'">
Note that
document.services.src
corresponds to the
src
attribute on the
<img />
tag with the name attribute value of
services
. When the user places
the mouse pointer over the image link,
document.services.src
is set to the
new image file (serviceson.gif). When the user moves the mouse pointer off of the
image link,
document.services.src
is set to the old image file (services.gif).
The image links for the Home, Ask the Vet, and Contact pages should be mod-
ified similarly to the Services image link. Save your page and test it in a
browser. You should see the images swap.
In a similar manner, add image rollovers to the services.html, askthevet.html,
and contact.html pages. Save your pages and test in a browser.
2.
Add the date last modified to the home page.
Launch Notepad and open the index.html page. Modify the index.html page as
follows:
In the page footer section after the e-mail link, add a script block that will
write the following message to the document:
This page was last modified on: date
●
Use the
document.lastModified
property to display the date.
●
Pasha the Painter
See Chapter 2 for an introduction to the Pasha the Painter Case Study. Figure 2.34
shows a site map for the Pasha the Painter Web site. The pages were created in earlier
chapters. Use the Web pages indicated in this exercise from the Chapter 9 paintercss
folder. You have two tasks:
1.
Add an alert message that welcomes the user to the Pasha the Painter Web site
when the user displays the home page (index.html).
2.
Add form data validation to the estimates.html page such that if the name, e-mail
address, or phone number input boxes are empty, the form will display an error
message and will not submit.
Hands-On Practice Case
1.
Add an alert message that welcomes the user to the Pasha the Painter Web site
when the user displays the home page (index.html).
●
Launch Notepad and open the index.html page from the paintercss folder.
●
Edit the
<body>
tag as follows:
<body onload=
"alert('Pasha the Painter can handle your painting needs!');">
●
The load event occurs when the Web page begins to load in the browser. The
onload
event handler in this case pops up an alert message.
Save the file and test it in the browser.
Search WWH ::
Custom Search