| This is for those of you new to using this style of coding. This is just a helpful way to give you some sanity. We recommend you use Macromedia Dreamweaver for coding. Frontpage works as well, but Dreamweaver is -much- nicer. We also recommend Abobe Photoshop for graphics editing. Step
1:
Make the image. We are using the panel from Captain's Log for reference. Image we are using:
Step
2:
Cut the image to place into the table. This panel is an overly easy panel to cut. Cut one image along the top and then cut the image part along the left side so you end up with the following images: Top:
Left:
Step
3:
Place into coding. Since this image uses a black background you don't need to put anymore images into the panel. Just make the page/table have a black background. If you want to use an image like this with a varying background you can make these into .gif images with no black around them. For more information on how to make a .gif with a transparent background contact Joey. Note: For this example we are leaving the table borders in. When you create a table using images like this. You want to set the table to 0 cell spacing and 0 cell padding with no border.
Step
4:
Create the image map. In Dreamweaver and Frontpage all you have to do is click on the image and then select the little shape objects to create the map spots. After clicking the shape user you want to use, merely click and drag it around the spot you want for one of your links.
Since this panel has two images that will require links, you will end up with two image maps. You don't have to do anything special. Once you are done clicking on the first image, you can click on the second image's spots where you want links to be and Dreamweaver will automatically create a second map for you. If you don't have these, don't worry, you can still create the image map. You just have to be more html savvy than the rest of us. And see the extra steps at the end of this. You can name your image map. If you don't it will default to the name map and the any sequential maps will have a number after them. Once you are done selecting areas your panel will look like this.
Step
5:
Put the link information into the HTML. For this you will need to be in HTML mode. You can do it in the display mode, but it's much more difficult. All you have to do from here is plug in the lnk you want to match the corresponding shape below. Here is what your panel currently looks like in HTML mode.
That's it! You've just created an image map to use instead of all that tedius individual links. By
Hand
Now, if you don't have Dreamweaver and you are in the stone ages of coding in notepad. Don't worry. All you need to know is the following code. It's a bit more tricky as you will need to know where your links lie in the image itself as you have to put in the pixel numbers for the coordinates. At the end of your img src tag add:
At the end of your html before you close the body and html tags put your map coding:
For more help with image maps please contact our design team. |
||||
