course logo
Home News Links People Catalog
spacer page banner
active page logo

JavaScripting Workbook Two

Please complete the following exercises as you see fit (to maximize your learning, confidence, and motivation). The work is all associated with the examples we did in class together during the fourth week of class. So, do refer to our week 4 lecture notes as needed. If you find the workbook to be too simple for your level of expertise, feel free to replace the requirements with more challenging requirements (but start from the same code provided in each task below).

Extending the basic Netscape Rollover Approach

We looked at a simple example of using the onmouseover and onmouseout attributes of the Anchor element (the A element) to provide a visual rollover effect.
Please extend the example Joe provided to have Joe stick his tongue out when you click anywhere on his face image. To help you, I've provided an image I made in Photoshop and remind you that the onclick attribute is available for you within an opening A tag. Also, I remind you that if you set the href attribute of an anchor tag to a bookmark that does not exist in the page, the hyperlink will return to the current page without needing to reload the page (for example href="#nowhere").

What happens if you try the same technique within the IMG tag or by prepending a DIV element around the A element?

Practicing the CSS rollover technique

Go ahead and review the code pieces for the simple 32x32 pixel CSS rollover example we did in class. Add a second rollover image to start the process of creating a menu from CSS rollover components.

Altering Autogenerated code

Take a look at the output of the automated menuing tool we used together in class. Change the code so that the description of each menu item appears to the right of the menu instead of as a separate menu table item beneath the menu options. Take a look at some other JavaScript generating forms including a banner rotation tool. Note the variety of form-driven JavaScript tools available from the Spider Webmaster Tools site (an alphabetical list appears on the left-hand page of the website).