Image Questions Back to Main FAQ

Join the Mac OS 8 Web Campaign!

1. Why does CHP size missing images to 50x50?

2. How do I set the background color or image and colors for linked and unlinked text in my html document?

3. How do I set up an Image Map?

4. How do I set transparency and interlace options for my image?

5. How do I create picture links without borders?

1. Question: Why does CHP size missing images to 50x50?

Answer: That is the size of the "missing image" icon CHP uses. A workaround for this is to edit the source of the file after you have finished working with all the images and erase the HEIGHT and WIDTH attributes for each of the missing images. (CHP seems to only add WIDTH/HEIGHT info when the user manipulates the image). Or better yet, if you know the dimensions of the missing images, replace CHP's 50s with your numbers. TOP

2. Question: How do I set the background color or image and colors for linked and unlinked text in my html document?

Answer: To set the background color or image, choose "Document Options" from the Edit menu. Click on the pop-up menu in the upper-left hand corner of the Options window and choose "Colors and Backgrounds". Here you can select the colors for various parts of your html document. To change the color, click on the colored box for the part you want to change. Select the color from the color wheel (Mac) or color palette (Win) that appears. To use or change a backgroud image, click on the set button, then select the image file you want to use. If you wish to stop having a background image, click the "None" button. If you want to reset the colors and backgrounds to their default setting, cllick the "Default" button. When you're done, click the "OK" button. You will see the color changes in CHP, however, you will NOT see the background image. The background image will appear when viewed with a graphical browser on the Web.

Note: If you are making a frame document, the background for each separate frame can be set by opening the document that will appear in the frame, choose Document options from the Edit menu, and as above, set the background to whatever you want it to be. This will appear as the background for that frame when a frames capable browser looks at your framed page. TOP

3. Question: How do I set up an Image Map?

Answer: There are two types of image maps, server-side and client-side. The kind CHP supports is server-side. There are ways of changing a server-side image map to a client-side image map, see below. Claris is now shipping Claris Home Page 2.0. The new version is able to automatically create both server-side and client-side image maps, so the following instructions will differ. As soon as I get a copy of CHP 2.0, I will add the new (hopefully easier) procedures.

Note: Server-side image maps are supported by practically every graphical browser, client-side image maps currently work only with a few, notably Netscape 2 and above. As the names suggest, server-side image maps are dependent on the web server, and client-side image maps are dependant on the client browser. You WILL NOT be able to test your server-side image map before uploading it to the server.

Note: If you are using CHP 2.0b1, avoid setting regions which touch the edge of the image, as a glitch will cause those image maps to be erased. This problem has been corrected in CHP 2.0.

Server-Side Image Maps

To make a server-side image map in CHP 1.0x:

1.Insert the image you wish to use.

2.Double-click on the image, and in the Object Editor click on the "Image Map" button.

3.In this window you can set many options for the image, some related to image maps, some not. Use the circle and rectangle tools to select regions of the image for which you wish to define links. You can also set and reset transparency, use the Move... buttons to position the regions in front of or behind each other, and decide whether to interlace the graphic or not.

4.Once you have drawn the regions, open the link Editor, and select the regions one by one, setting their link in the Link Editor window.

5.When you are done, close the window, click the save button. A new file with the extension .map will be created in the same directory as the graphic.

6.Back in the html document, double-click on the image and if necessary expand the Object Editor by clicking the triangle in the lower left-hand corner. Set the Behavior to "Image Map".

7.Open the link dialog. Set the URL to http://www.server.com/cgi-bin/imagemap/your www directory/image.map. Replace www.server.com with the address of your server, cgi-bin/imagemap (a standard route for image maps) may be different on your server, check with your provider, you www directory is the directory people type in their browser to get to your homepage, and image.map is the name of your image with the .map suffix. (For instance, an Image Map on my Web site would use the following link: http://www.ee.pdx.edu/cgi-bin/imagemap/~jeskem/image.map) This will work in most cases; otherwise contact your provider for help.

8.When you upload the image and html file, you will also need to upload the .map file. Ask your provider where to put .map files, there are different set-ups.

Client Side Image Maps

You can use the .map files which CHP creates to make client-side image maps, but it requires knowing the html codes used in client-side image maps. To get the region descriptions for the client-side image map, you can open the .map file and copy the text inside. There are some programs that apparently automate this process; Below you will find instructions for doing this by hand. Note: as discussed recently on the list, there are apparantly differences in the way circles are coded in SSIM and CSIM, so for now, my suggestion is to avoid using circles in CSIMs. Claris just announced CHP 2.0, and claims that it will be able to do both SSIMs and CSIMs automatically. When I do get a copy of CHP 2.0, I will write up the new steps.

To create a client-side image map in CHP 1.0x, first follow steps 1 through 5 above. Then:

6. Open the .map file with CHP or any other text editor. (Preferably one which uses Drag-and-Drop, since you are going to have to do some moving)

7. You should see something similar to the following:

default default.html

circle cursor.html 252,48 264,48

rect cell.html 126,22 252,43

8. To the beginning, add the line <MAP name="somename">. Also, if you entered a default URL, (the " default default.html" line above) move the line to the bottom. You should now have:

<MAP name="somename">

circle cursor.html 252,48 264,48

rect cell.html 126,22 252,43

default default.html

9. Now change each "circle" and "rect" line in the following manner:

To the beginning of the line add "<AREA shape=" and enclose the first word in quotes. Move the URL to the end of the line. Put "coord=" in front of the numbers and enclose the numbers in parentheses. Replace the space within the numbers with a comma. Finally put "href=" in front of the URL and enclose the URL in quotes, adding an ending ">".

"circle cursor.html 252,48 264,48" becomes "<AREA shape="circle" coords=" 252,48,264,48" href="cursor.html">"

The default area tag is a special case. Change it to <AREA shape="default" href="default.html">

10. Finally add an ending </MAP> tag.

So now we have:

<MAP name="somename">

<AREA shape="circle" coords=" 252,48,264,48" href="cursor.html">

<AREA shape="rect" coords="126,22,252,43" href="cell.html">

<AREA shape="default" href="default.html">

</MAP>

11. Now "Copy" the text, and open the document where you want the map.

12. Switch to source code mode and position the insertion point at a convenient place. (I would recommend the end of the document, before the </body> tag, since this code will appear in red in edit and preview mode because of a CHP quirk) Then "Paste" the code.

13. Now switch to edit mode, and double-click the image on the page which you made the image map for (or insert it if you haven't). In the "Extra HTML" field, type USEMAP="#somename" (substitute the name of your map for somename).

Your client-side image map is complete. There is no .map to download, but make sure you upload the image.

Some notes: You can have a dual client-side/server-side image map. Just follow the directions for both types. You can reference <MAP> tags in other files. Simply set the USEMAP= to "otherfile.html#somename". Relative URLs in <MAP> tags are referenced relative to the file which contains the <MAP> tag, not the one which calls it. Multiple in-lined images can use the same <MAP> tag. TOP

4. Question: How do I set transparency and interlace options for my image?

Answer: Double-click on the image in your document. In the Image Editor dialog box, click the Image Map... button. A window of your image will appear. The tools in the toolbar are for setting image maps, interlacing, and transparency. To set a color to be transparent, click the button with a transparent orange circle over a brown rectangle, then click within the image on the color you wish to set to transparent. To remove the transparentcy, click the button just to the right where the circle is not transparent. The two buttons on the right of the toolbar set whether the image is interlaced or not. TOP

5. Question: How do I create image links without borders?

Answer: Some browsers automatically add borders to image links. One method that sometimes works: double-click the image, and put a zero in the Border field. TOP