CIS 430 Assignment 6 -- Javascript
Create an html page that uses Javascript scripts to perform image swapping. When items are offered in various colors, it is helpful to offer the consumer the option of seeing the item in each of the colors. Develop an eCommerce page that displays a swatch selection as well as an image that changes when the mouse hovers over a swatch.
Your page should look like the following:
You can obtains the image files via this link. The files are zipped.
A demo of the required functionality is available here for Firefox and here for IE. The demo was done using CSS rather than Javascript so that you do not have access to the Javascript code in my solution. Unfortunately CSS is not consistent across browsers, hence the two versions. If you really want a challenge try to create a version using CSS.
You can use this page as an example, and as a source of Javascript to adapt. Your page must work in both Firefox and IE.
Requirements:
Use Javascript.
Preload all of the larger images to avoid loading delays when the user indicates a selection.
Include a test to be sure that Javascript is not turned off in the browser. If it is, provide alterntive links to both my Firefox version and the IE version. Include the following message, with the correct links embedded:
It appears that your browser does not support JavaScript, or you have it disabled. This site is best viewed with JavaScript enabled. If JavaScript is disabled in your browser, please turn it back on then reload this page. If your browser does not support JavaScript, click here for a Firefox-compatible version, or here for an IE-compatible version.
Make your page appear as much like the example as possible, including image size, image borders, etc. Note that CSS loses the image when you move the mouse off a selection image, but Javascript does not. In order to test your abilities, you are required to make Javascript mimic the behavior of a CSS-based page, and restore the original image when the mouse moves off a swatch. Refer to this page for the correct event and coding format. (No, I don't particularly like it when it reverts to the original image, but I want you to figure out how to do it in Javascript anyway.)
As always, the assignment will be considered complete and submitted only when you link it to your index page.
Hint: If you use Firefox to test your page, note that Tools--Javascript Console can be used to display errors in your pages.
Due 3/25/2005.