Ecommerce Site Javascript Assignment

From Knowledge Kitchen
Jump to navigation Jump to search


Create a home page of an e-commerce web site. The site should show at least 6 product images. When a user mouses over one of the product images, a product description appears in its place. When a user mouses off of the product description, the image returns.

Wireframe

An interactive prototype is available to help understand the interaction design of this page. Download this file and open up index.html in your browser to see an interactive prototype that shows the desired behavior. Note that the HTML, CSS, and Javascript code used in this prototype is not an appropriate solution to this problem. This is simply showing the desired functionality.

Breaking it down

Content (i.e. HTML)

For each product thumbnail, you will have the following content. Only one of the two will be visible at any given time:

  • an image of the product
  • a description of the product

Behavior (i.e. Javascript)

For each product thumbnail, you will have to add the following interactivity:

  • detect when a user has moused over a product thumbnail area
    • hide the product image and show the product description
  • detect when a user has moused out of the product thumbnail
    • hide the product description and show the product image


Hint

Content

Put a wrapper element around each thumbnail. For example:

<div class="thumb">
         <img src="..." />
         <article>
                 ...
         </article>
 </div>
 <!-- repeat 6 times -->

Behavior

Attach the event handlers to the wrapper elements, since they are always displayed. The product image and product description are only displayed some of the time, and can therefore become quite tricky. For example:

$(".thumb").mouseover(...);
$(".thumb").mouseout(...);


And use a combination of Javascript's built-in this keyword and the JQuery's find() method to find the image and description within the thumbnail that was hovered over. In event handling, the this keyword is a pointer to whichever element triggered the event to occur... in this case the div that was moused over. The find() method will then allow us to find any element nested within the this element.

For example:

$(".thumb").mouseover(function() {
        $(this).find("img").hide();
        $(this).find("article").show();
});

Screenshots

Default state

The Quakery's default state

Hover state

The Quakery's hover state


What links here