Tutorial 5. Popping Up a Large Image in a New Browser Window

So you weren't listening when the directives of the Academic Director of Graphic Design were read. You didn't hear me when I said (a time or two) that your gallery images should be large enough to be seen clearly. No, you fell in love with designing the site, but lost sight of what the site was for. It's OK—you can fix it.

This tutorial teaches how to take a small image on your site and make it a link that causes a big version of it to open in a new browser window.

1. The Problem: too much bun, too little dog. Let's say that instead of your nice big bread loaf gallery pic, you fell in love with your site design and left the bread photo the size of a postage stamp. In this example, the green image display area has the same slice as the previous design.

We're going to make this slice a button that will launch a larger version of itself.

2. Make larger versions, place in folder. I've got a large version of the bread photo, 600 pixels wide. To get things started, make a folder and call it something like big images inside your pre-existing images folder.

3. Let users know they can click the image. In Photoshop, place some text near the tiny image, acceptable as part of the same image slice (as shown). In this scheme, any part of the text or image will be clickable. Better (or more elegantly) yet, a button can be made from its own slice.

4. Output the new sliced image. Using output techniques you should know well from the other tutorials, output a new slice into your images folder that will be the "enlarge" button.

6. Replace the image with the new text-bearing image. On the gallery page, using techniques you know well, replace the unmarked image with one bearing the "enlarge" text.

7. Make the image a link. With the image selected, go down to the Properties Panel, find Link and click on folder icon. Navigate to the big picture of the bread, as in the example. Remember to set the border to zero.

8. Add a "Target" to the link. With the image selected, go again to the panel, find Target and click the roll-down. From the roll-down, select _blank and click. This is the code that will spring up a new browser window when the link is clicked.

9. Check the code. When you've done this, your code should look something like this.