Ok, so you created the perfect button bar for your web page. now your wondering how to make the buttons clickable. Well with Photo Impact, it's pretty easy.... Heres how you do it!

First open your image in Photo Impact.

Now from the menu select Web/Image Slicer and this window will open:

To begin, we have to cut the image. You can use either the scaple tool or click on the checherboard image.

Since we are making pretty straigh foward cuts, we will use the checkeroard tool to make our cuts. We have 4 buttons, so when we click on the checkerboard we want to set the rows to 4 and the colums to 1.

This will cut our image into 4 even slices.

There are a couple of ways to proceed from here. I'll explain the method I use.....

As you can see in the image, our first button is selected. This is indicated by the broken line around the image. So from the window you want to select the Image Optimizer button.

When you do, this window will open:

Now this is important, because it caused me a lot of headaches till I got a tip from another PI user.

If you look at the image on the left, you'll notice a slight outline around the button. Thats the background we are using. But you'll also notice that the rest of the background appears white. It should also appear as the gray background we are using. If yours appears as white, heres how to fix it.

Click on the Mask Options, and select Pick Color. Now place your cursor somewhere in the white background, while you hold down your CTRL key. The cursor will turn into an eye dropper. Now click in the white area, and it should change to the background color you are using as seen in this image:

Now your good to go.... Click the Next button, and the next button in your button bar should appear. If the background area for this button is also white, follow the same procedures as used above. Do this until all your buttons have been processed. Then click OK. The original screen will open.

Now we want to begin to add out links, to the page the user will be sent to when that button is clicked. So in the first box you type in the URL to that page. Heres an eample:

In this example, we are using the 2nd button. We entered the URL and we also added some Alt Text, which will be displayed when the user's mouse curso is placed over the button. You want to do this same thing for each button.

When your all done, you want to click Save As. Then enter a name for the web page you want to save this information to. You will notice 2 things have happened.

First, an html document with the name you entered in the Save As box was created.

Second, a new folder was created called Images.

This Images folder contains your slicked images. These images match the table code that was automatically created in the html file that was created. You want to be sure when you upload the html file to your web site, you also upload Images folder all all those files as well.

How this is accomplished depends on what program you use to upload files to your server. In my case, I use Cute FTP, so I only need to select both the html file and the Images folder and drag them both into my upload screen. they are all uploaded automatically.

When your done, you should have something like this:

slicerRow1xCol1.gif
See images of Ritzville, Wa
How to add color to b/w images
Send me an E-Mail

You'll notice that your buttons are now clickable. Pretty slick huh?

Home | Ritzville | Terra Gen Images | Colorize | Transparent Images | Fun with Java | Button Bars | My Tools | Tutorials | Mouse Over Effect | Best Links | Restoring Damaged Photos | E-Mail

Copyright, 2000 BingoWare.Com. All rights reserved.