Image Rollovers with Javascript

In this exercise we will be creating a basic image gallery function with rollover thumbnails that load a larger image into a larger viewing area. We’ve seen this typical design pattern most in the context of portfolio sites and it will possible help with your 2nd assignment.

First I’ll outline the 3 main stages of this exercise:
A. Layout Gallery in Photoshop
B. Export Images (Photoshop)
C. Create layout in HTML (Dreamweaver)
D. Insert images into HTML (Dreamweaver)
E. Add behaviours to thumbnails (Dreamweaver)

A. Layout Gallery in Photoshop

First we will layout our gallery in Photoshop, I suggest you download the 960 Grid and use the Photoshop 12 column template as a starting point for your gallery layout.

Making Layer Masks in Photoshop
1. Load Selection from the ‘Wireframe’ layer by Command clicking on the thumbnail in the layer palette.
2. Select the layer you’d like to mask
3. Add Layer Mask by clicking on the ‘Add Layer Mask’ icon in the layer palette
4. Unlink the new layer mask by clicking the link between the image layer and its mask
5. Resize the image layer by using Free Transform (command T)

Exporting out images

C. Setting up the layout with Divs

Before we make the image rollovers we will have to set up the basic structure of the HTML document. We will need to think about the layout and how to best divide it into sections. For this example a simple ‘container’ div with ‘leftcolumn’ and ‘rightcolumn’ divs contained inside.

D. Insert Images

Next we’ll insert out images into our two column structure:

Important Part: Give the image an id
Each image that will have an image rollover or will react to a rollover action will need to be identified in the HTML. This is necessary for the Javascript to refer to specific image areas to replace images.

Add Behaviors

Finally, we’ll need to select the image that you’d like to add a behavior to, in the Behavior Palette (Can be found under the Windows menu) add a new behavior by clicking on the Swap Image item in the dropdown menu. (See image below)

Select the image that you’d like to alter in the top listselect box:

Then click the browse button to navigate to the image file that you’d like to replace on rollover.

If you’d like to alter more than one image on rollover, simply select another image in the SwapImage select box and repeat the same process.

A Video Tutorial on Making a Swap Image in Dreamweaver

http://www.digitalfamily.com/dreamweaver/advanced-tutorials/swap-image-behavior.html