I’ve spent today getting my homepage up and running. I had already drawn all of the content on Illustrator and had decided on a colour scheme and a font . I had already decided to do away with the coloured versions of my icons (see week 4) and had decided only to use colour to indicate the page link when each of the elements was rolled over.
In order to make the icons on the page change colour when the mouse hovers over them I needed to learn how to create disjointed rollovers. This is because I wanted different aspects of the page to change when each section is highlighted. For instance, when the climate flask is rolled over I want the title to disappear and the other flasks to have a grey outline. A simple rollover image would not allow for this.
Before I could attempt the creation of some disjointed rollovers, however, I needed to slice up my homepage image in Illustrator. I needed each section that I wanted to act as a rollover to be a separate slice. Once I’d done this I saved it for web. All of the slices were then saved separately as images.
Here’s what the page looked like sliced up…
I then had to change this original image in Illustrator to what I wanted the page to look like when a specific area was rolled over. So, for example I needed a version of the homepage when the food icon was rolled over. Eg.
I had to save this image (and every other version i needed) for web too. Then I went about creating disjointed rollovers. Basically, this type of rollover meant that rather than just swapping the image that is rolled over for another I could have the appearance of the whole page change when an icon is rolled over. Creating this type of rollover was relatively easy (once I’d found the Behaviours toolbar anyway).
I just had to select the image (the sliced up part of my homepage) that I wanted to initiate the rollover and on the Behaviours toolbar select Add Behaviour and then Swap Image.
A list of all the slices/ images appeared and all I had to do was pick the images that I wanted them to change into. I’ve done this for all of my images now, so the homepage looks like this…
And as you rollover each icon you get;