|
|
|
|
||||
|
|
© 2000 by Gary Priester. All Rights Reserved.
Step 1. Open CorelDRAW 9.
Step 1a. With nothing selected, select Pixels from the Units drop-down list on the Property Bar.
Step 1b. Select Page Layout from the Layout pull down menu. Change the Resolution setting to 96 dpi.
Step 1c. Right click on the screen rulers and select Grid Setup. Change the Horizontal and Vertical spacing units to 10 pixels. Enable Snap To Grid. Press OK to exit the dialog.
Step 1d. From the Tools pull down menu, select Color Management. Uncheck Calibrate Colors for Display. This turns off CMYK view mode and turns on RGB mode, the mode in which web browsers operate. Press OK to exit the dialog.
This will configure DRAW for producing web graphics. All web graphics are measured in Pixels. Using any other measurement may result in a visible outline around the web image. Using Snap To Grid will ensure the rectangle we're about to draw will be in an even number of pixels.
Step 2. Using the Rectangle Tool, hold down the Ctrl key, to constrain the rectangle to a square and construct a 260 x 260 pixel square.
We will be using a triangle symbol from the Geographic Symbols font. The triangle symbol is not part of the standard character set, so we'll use the Alt key and the Numeric keyboard to fetch it. In Windows, the extended characters (other than the characters found on the keyboard) can be accessed using the following technique. Mac users can use Key Caps to locate the proper symbol.
Step 2a. Click the Text Tool on the screen. Make sure that Num Lock is enabled. (It's just above the numbered keys on the numeric keyboard). Hold down the Alt key and on the numeric keyboard, key in 0253. This will produce a lowercase ý with an accent. Select the ý, by dragging the text cursor over it, and from the Fonts drop down list, select Geographic Symbols (also called Carta). The symbol should now change to a triangle. Change the size to 146 points.
Using the Text Tool, repeat the process to create the eye, house and envelope symbols using the Webdings font in 72 points. The eye symbol is the capital N, the house is a capital H, and the envelope symbol is Alt 0153.
Arrange the symbols as shown.
Step 3. Use the RGB colors shown. Or you can pick similar colors from the Netscape or Internet Explorer palettes. (Window | Color Palettes | Netscape)
Step 4. Copy the three symbols and triangle to the clipboard (Edit | Copy). We'll weld the triangle and three symbols into one shape and use the shape as a drop shadow. Select the symbols and triangle and press the Convert to Curves icon on the Property Bar (the circle with the four small circles). Press the Weld button (right side of the Property Bar) to create one continuous shape. Change the fill as shown and move the welded shape down and to the right about 5 points in each direction. In DRAW 9 with nothing selected, you can change the Nudge Offset amount (in the center of the Property Bar) to 1 pt.
Step 5. Paste the symbols and triangle on top (Edit | Paste). Add text to identify the three functions. I have used 14 point VAG Rounded. If you don't have this font use something similar.
We now have all of the objects needed for our image map. Now we'll assign URLs (Universal Resource Locator) to each button and define our hot spots, which are the areas of the image that will activate the links.
Step 6. Right click in an empty area of the Property Bar and select Internet Objects from the pop out menu. The Internet Options dialog opens as shown. Select the eye symbol. In the far left text entry window, click once and the window will empty. Key in images.htm. (This is assuming that this will link to a page called images.htm. You can later modify this as needed). Press the icon with the four red rectangles to activate Show Hot Spots. There are two buttons that are now activated. The first one describes the hot spot based on the object's shape. This is good if you are defining two objects that butt up to one another such as states on a map. However this creates a very large text file because of the large number of coordinates, so the second button is better. This uses a bounding box rectangle that encloses the shape and only needs four coordinates.
The Internet Objects toolbar remains open until you close it, which is cool because we need to add hot spots to the other two symbols. Select the house icon and link this to index.htm which would be the default name for a home page. Use the Bounding Box hot spot option.
For the last icon, the electronic envelope, we'll add a mailto: address. This will bring up an e-mail window addressed to you. In the first text entry window, key in mailto:name@ISP.com. Substitute your e-mail address for name@ISP.com The mailto: (the colon is important) is the command that tells the browser to open an e-mail window.
All that remains is to export the image map. Corel's Publish to Internet Wizard will step us through the process and create a folder in which will be placed an HTML file containing the necessary code to display the image map and it's hot spots, and the image file.
NOTE: There is no Selected Only option when you Publish to Internet. So make sure that your image map is the only image on the page. Also, Corel places your image map in the same relative position in the browser screen as it is on your page. So to be on the safe side, move the image map to the top of the screen.
Step 7a. From the File pull down menu, select Publish to Internet. Not surprisingly, the Publish to Internet dialog will open. Press the Browse button and select a folder for Corel to place the necessary files. It's best to start with a new folder. From the drop-down list at the bottom of the dialog, select Single Image with Image Map. The other options can be used if you want to export an entire page, which can also include your image map. Press Next.
Step 7b. If you have text, such as the text we placed under the symbols, check Render Text as Images. Press Next.
Step 7c. Under file name, enter the name for your page. I've used IMAGEMAP.HTM. Check Replace existing Files. You may preview your file and want to make some changes. This option will overwrite the existing files. On the other hand if you want to compare several versions, do not check Replace Existing Files and Corel will create a new folder and files each time you publish to internet. If you check View Image in Browser, when you press Finish, Corel will launch your default browser (Netscape or Internet Explorer) and preview your image map. Press Finish.
That's all there is to it. Maybe in DRAW 10 we'll have the ability to create those cool JavaScript rollover buttons or export a Flash image map file. But this will get you by for the time being.
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
