Class 5 – Assignment #2

Posted: October 17th, 2009 | Author: | Filed under: assignments, javascript | Tags: | No Comments »

Your coding assignment is to convert the following wireframe diagram into a fully functioning page, using XHTML & CSS for the layout and Javascript for the interactive behaviors.

Note: this is a wireframe, not a design comp.  So do not try to use make your pages pixel-perfect based on this diagram.  Use the diagram as a rough guide, and just make sure the Ad Banner and Skyscraper Ads you use are the size that is written into the wireframe.  All other design elements, including dimensions, colors, fonts, and borders are up to you.

E-Commerce Assignment wireframe

When someone mouses over any of the product thumbnails, the thumbnail should disappear, and a div containing information about that product should appear.  The information div should show up as exactly the same height and width in exactly the same place where the thumbnail was on the page.

When the user then mouses out of the product info div, the info div should disappear, and the product thumbnail image for that product should reappear.

So the trick to this assignment will be to first create the layout with all the basic page elements using XHTML & CSS.  Be sure to create an “img” tag and a “div” tag for each product.  The img tag should be visible when the page first loads, and the div tag should be invisible by setting its “display” property to be “none” in the CSS.

Create the mouseover and mouseout Javascript event handlers so that when you mouse over an image the image disappears and the div shows up.  And when you mouse out of the div, the div should disappear and the image should re-appear.

Tips / Spoilers

Note: don’t read this if you want to figure out the solution yourself.

Solution #1: Here is an example of how I would set up the product thumbnails in terms of both XHTLML and Javascript.  You can use this exact code for the thumbnails on your own pages, but be sure you understand how it is working.

Solution #2: It just so happens that you don’t even need to use Javascript to complete this assignment.  Here is an example that has no Javascript and relies instead upon the CSS :hover pseudo-class to do the same thing.

Solution #3: Here is a slight variation on the CSS-only solution outlined in Solution #2.  This version makes the product thumbnail become partially transparent when it is moused-over, instead of disappearing entirely.

No related posts.

Leave a Reply