Panda BA Blog

Using the Image Switcher it doesn't completely switch the images over it only temporarily switches the during a hover state and doesn't work for complete switch over.

This has forced me to re-think and re-design my website to accomodate this. I have descided that instead of have one preview that you change the images on to create your desired product (T-Shirt etc..). I will have a preview grid, where each character has its own window and preview, which using the Image Switcher has hover states to show customization.

If that isn't explained well my original website and my new website will be linked in following posts.

Project 5: Independent Project - Css Image Switcher

Tutorial

To creat my site i was having trouble figuring out how to get images to change when you hover or click a link, without creating separate pages to give the impression of the image switching.

Andrew suggested using Css Image Switcher and gave me a PDF instruction to help. Although I coudn't make alot of sense out of the PDF i did however find a very usful, quick and easy video explaining everything.

The video is by Chris Coyier and can be found here.

Project 5: Independent Project - Website Mock-Up

Here is my moch-up for my site. From this I will:

- Remove the footer = it is not needed as the site doesn't scroll at all.

- Remove drop down menu's = again they are not needed everything can easily fit on one page.

- Widen the content box = This will give more room for content and less waisted space.

- Place the colour selectors down the side = This will clear room for a bigger T-Shirt preview.

- Make the T-Shirt preview bigger = With more space a bigger preview is available and that i key to my site.

- Move navigation = Moveing the navigation to beside the logo will use up waisted space and allow more room for content.

- Navigation text bigger = With moving the navigation it gives more space for bigger text in links.