Week 3

Read chapter 4 of the JavaScript textbook.

The books shows how to do rollover buttons and menus using Javascript.

But...
The coolest method and easiest way to animate buttons and menus is with CSS!

W3Schools is an excellent resource to get you started. I found that W3Schools also has a W3 How To section that shows advanced HTML/CSS/Javascript techniques.

Example 1 (cats) of CSS rollover menu and image effects.

Example 2 (fruits) of CSS rollover menu and image effects.

Example 3 (dogs) of CSS rollover menu and image effects.

Lab Menus and Image Effects

You are going to create a mini website with at least 4 pages. The topic must be different than the one we did during the class lecture.

Part 1 - Create at least 4 html pages that are linked to each other through a CSS rollover menu system. You may reuse the menu rollover code we did in class.

This will be like we did in the class lecture. Important things to consider are that the HTML, CSS and Javascript (if any) are in separate files. Reason is that the CSS and should be reusable across an entire website.

Part 2 - On one of your pages you are going to create create a slide show, rotating banner, lightbox, or other useful image effect. This script/template you use can come from any resource you find on the web. The effect that you choose should be useful, and would be something that you could use on a professional website. (Note: Do not use the same script that was demonstrated in class.)

Again, it is best that the HTML, CSS and Javascript are in separate files.  Fully debug and test your script.

You MUST tell be on the first page of your mini website, what page has the special effect I should be looking for and what that special effect is, and where you got it from. Also provide a screenshot of the page with the special effect.

Assignment is due one week from when it was assigned.  50% penalty if late.