Header Rollover

During the design process of the website, I felt like that was an aspect of design that could use a little more attention. I originally started the navigation with five links, home, about, collections, shop and contact. I then realised that a way in which I could add a home link without need of it in the navigation. This was to use the header image as a link.

I tried creating a simple click through link, but thought that the black and white nature of the header felt a little flat. I then began looking into CSS rollover images. I found lots of tutorials for coding that could be written by myself, but considering I usually take that approach, I decided to see what Dreamweaver could offer me to create this effect.

I used this tutorial to find out how Dreamweaver worked, then used the Insert Rollover Image option under the Insert dropdown menu. Despite there being simpler codes out there to create this effect, I'd never really used Dreamweaver in this way before, mainly choosing to code everything myself.

There are many built in features in Dreamweaver that I know I often ignore, so to finally use something to make my coding experience a little easier was very welcome!

The above code was the one that Dreamweaver created for me to allow the image to rollover and work as a link. The only issue I have with it is that it makes my code section a lot bigger due to the Jquery, but it works seamlessly so beggars can't be choosers!

The final effect is when hovering over the image of the header, the Vivienne Westwood logo changes to the spot colour and it allows you to click through to the index page.