Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm160b/exercises/ex09.php

You are here: Home > Cabrillo > Dm160b > Exercises > Ex09

Web Publishing 2 (DM160B), Cabrillo College, Spring 2008

Exercise 9
Rollover Techniques

Resources for this exercise:

See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
See the CSS Box Model tutorial.
See CSS Image Rollovers.
See Fast Rollovers Without Preload.
See CSS Buttons.
See the Rollovers section of the Resources page.

In this exercise you will use four different techniques to create rollover effects, resulting in:

two JavaScript rollovers.
one CSS image rollover changing the background color.
one CSS text rollover changing the background image.
a three-item menu of CSS button rollovers using the box model for 3-D effects.

1) Create a new Web page for exercise 9.

2) This page must contain the XHTML 1.0 Strict DocType, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

4) This page must display your name.and say "Exercise 9".

5) This page's <title> must indicate that this is your exercise 9 page, so it should say something like "John Sky's DM160B Exercise 9".

6) This page must contain a relative link to your home page.

Rollover technique 1 — JavaScript rollover

7) On this page you will place two JavaScript rollovers. This means that you will need to create four images (two for each rollover). These instructions assume you will use the free online JavaScript Source rollover generator to write the JavaScript code for you, but you can use another program, such as ImageReady or Dreamweaver, to write the JavaScript code. In my opinion the JavaScript Source site is very easy to use, and writes fairly clean code (including preloading of images) that works in many browsers, so I recommend it. If you choose another way to write your rollover code, and you have trouble with it or cannot get its code to work properly or to validate, then use the JavaScript Source method.

8) Create these four images in a graphics program of your choice, or you can try using a site such as http://www.cooltext.com. The images can be very simple, but each pair of images should be the same exact size in pixels dimensions, and you must create the images yourself.

9) Upload your images to your images folder on the server.

10) Go to the free online JavaScript Source rollover generator and use it to create your rollover code. For each rollover, copy and paste the resulting rollover image code, and the preload image code, into your exercise 9 page.

Make each rollover "clickable," so that clicking on the rollover will take the user to a Web page (you do not need to create new pages that these rollovers link to; you can link to any pages you wish).

11) To keep the validator happy, you will have to modify the generated code to conform to XHTML Strict. Please do this carefully:

Change the UPPERCASE code to be lowercase.
Instead of placing the anchor tag directly into the <body>, place it within a container tag such as <p> or <div>.
In the <script> tag:
- Remove the "language" attribute.
- Add a "type" attribute.
- So that the <script> tag now reads:
  <script type="text/javascript">
In the <a> tag:
- Remove the "onmouseover" and "onmouseout" attributes; these will need to be moved into the <img> tag.
In the <img> tag:
- Add the "onmouseover" and "onmouseout" attributes that were in the <a> tag:
  - These attributes will look something like this:
    onmouseover="image1.src='http://www.blah.com/blah.jpg';"
  - Remove the "image1." so that it looks like this:
    onmouseover="src='http://www.blah.com/blah.jpg';"
  - Remember to remove that from both the "onmouseover" and the "onmouseout" attributes.
- Change the "name" attribute to be an "id" attribute instead.
- Remove the "border" attribute.
- Add an "alt" attribute.
- Add a space and a slash to the end.
- So that the <img> tag now reads something like:
- <img onmouseover="src='http://webhawks.org/~dm160bjohn/images/2.jpg';" onmouseout="src='http://webhawks.org/~dm160bjohn/images/1.jpg';" id="image1" src="http://webhawks.org/~dm160bjohn/images/1.jpg" alt="go home" />

12) Because you've removed the border attribute, your rollover image will have a border show up in some browsers, such as Firefox. Use CSS to stop the border from being visible.

13) If you have a live Internet connection you should be able to test the rollovers before uploading the page, as the links to the images are full URLs.

Rollover technique 2 — CSS image rollover changing background color

14) Now add one CSS image rollover to this page, using the technique to change the background color of a transparent image demonstrated in at CSS Image Rollovers. You must create the foreground image yourself.

First you will need to create one transparent GIF image for each CSS rollover (unlike JavaScript rollovers, where you must create two images for each rollover).

15) To keep the validator happy, you will have to modify the sample code to conform to XHTML Strict:

In the <img> tag:
- Do not use the HTML "border" attribute (use CSS to stop a border from showing up).
- Add an "alt" attribute.
- Add a space and a slash to the end.

Rollover technique 3 — CSS text rollover changing background image

16) Now add one CSS text rollover to this page, using the technique to change the background image of a text link demonstrated in at Fast Rollovers Without Preload. You must create the background image (which is one image file with three backgrounds, each used to indicate a different hover state) yourself.

Rollover technique 4 — CSS button rollovers using box model for 3-D effect

17) Now add a short menu of at least three links using CSS button rollovers to this page, following the technique of utilizing the box model to create 3-D effects, as demonstrated at CSS Buttons.

Note: you can vary the technique used in the above tutorial by using the "inset" and "outset" values of the "border-style" property, if you wish.

18) On the page, indicate which of the four techiques was used to produce which rollovers, so that one looking at the page will know how each rollover effect was produced.

19) Save this file as "exercise9.html".

20) Upload this page to your folder on the server. Upload your images into your "images" folder on the server.

21) View this page (the page on the server, not the page on your disk) in a browser (try as many browsers as possible) to make sure the rollovers work properly! (Note that the CSS rollovers will not work in Netscpae 4, but they should gracefully degrade.) All rollover effects must work in Firefox.

Go to:
http://www.webhawks.org/~yourusername/exercise9.html
to view your exercise 9 page.

22) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

23) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

24) If there are any errors, fix them, re-upload the page, and validate them again.

25) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.