Product Page
For this product page, I re-used a lot of the
JavaScript I wrote for the original version 2.0
product page, but I also fixed and integrated some new
DHTML JavaScript for the 'description', 'specification',
and 'ideal uses' tabs. I also modified the tab
JavaScript to swap out the images for the tabs above
the scrolling text when they were clicked.
This is a static version of the product page saved from
the Patagonia version 3.0 site. Try:
Clicking on a color swatch to see the item in different
colors (note the selected color in the drop-down menu
also changes)
Selecting a color from the drop-down menu to see the
item in a different color
Clicking on the product image or the 'Click for Larger View'
text to see a larger view pop-up window of the item
in the currently selected color
Selecting different size/color combinations to see
the back-ordered and out-of-stock messages when 'add to
my bag' is clicked (hint: select different sizes in the
color 'Natural/Fire (171)' to see the different responses)
Clicking on the 'description', 'specification', and 'ideal
uses' tabs to see the different text for each category
Mousing over the up and down arrows to the right of the
'description', 'specification', and 'ideal uses' tab box
area to scroll the text up and down (hint: click on the
'specifications' tab first so that the text will be long
enough to require scrolling)
