Due Thursday, April 17
50 Points
This assignment gives you a chance to work with the DOM and events.
Since you will be writing separate programs for each part described below, each requiring its own XHTML page and CSS, start by writing a simple XHTML page which will eventually provide links to each program’s XHTML page. Make it clear from each link’s label and/or context to which program it leads. Eventually, when the assignment is complete, publish this page (along with all the files comprising your solutions) to the wcit server and add a link to it to your home page.
Event handlers are often used despite their limitations because they are
easy and reliable. Write an object that can be used with any XHTML
document to add an event handler (not an event listener) to each
link within that document that is a member of the
external class. This event handler should trigger when the
user clicks the link, use an alert to explain to the user that they
are about to leave the site, and give the user the opportunity to stay
at the current page. If the user chooses to stay at the current page,
you should cancel the link’s default action to prevent the browser
from following the link. If the user chooses to proceed, allow the
browser to follow the link.
Write a test page that contains at least two links that are in the external class and at least two that are not.
To get started with event listeners, you’re going to adapt the book’s
Rich Tooltip example to your own purposes. Specifically, modify the
Rich Tooltip example so that it displays tooltips for <acronym> and
<abbr> elements instead of links. For any <acronym> or <abbr> element
with a title attribute, your code should display a customizable
tooltip containing the value of that element’s title attribute.
Since <acronym> and <abbr> elements
cannot receive the focus, your code should not utilize listeners for
the focus or blur events.
Although you will need to make sure you fully understand the book’s code before you begin changing it, the actual changes to the JavaScript code will be straightforward. However, you will also need to alter the CSS to make the presentation of the page and your tooltips your own. A significant portion of the tooltip functionality is embodied in the CSS, so you will need to study the CSS carefully before you begin changing it. You should endeavor to present your test page and your tooltips in a manner that is visually distinctive from the book’s example and internally consistent.
An image rollover is a fairly common technique that uses events and the DOM to replace one image with another whenever the user moves the mouse pointer over the image. When the mouse pointer is no longer over the image, the original image is restored. For this part of the assignment, you will be utilizing your knowledge of both the DOM and event listeners (not event handlers) to implement this common effect.
You don’t need to generalize this code to work for any page, so feel free to write the JavaScript so that it’s custom tailored to your XHTML. However, you should do some research to figure out how to preload your images so there is no delay while the browser downloads the rollover image the first time it is needed.
Although they will work with any size images, rollovers tend to work best when both images are exactly the same dimensions, so start by searching out (or creating) two different images with identical dimensions.