MINNESOTA MICRONET Setting Up Your Website / Image Maps If you don't find the answer to your question here, send E-mail to help@mm.com or call (651) 681-8018 (9am-5pm M-F). If you need to call outside our regular business hours, please leave a message.   Clickable Image Maps   Important Basics   Creating Web pages   FrontPage   CGI     -Cgiemail     -Counters     -FormMail     -Imagemaps     -Mailto     -Password-protected       Web Directories     -PHP/MySQL   Transferring pages/   Uploading files   Viewing pages   What's wrong?   Announcing your pages   Commercial Web stats SETTING UP A CLICKABLE IMAGE MAP I've got a Website. I'd like visitors to be able to click on different areas of a picture or map and go to different Web pages or just to a different area on the same Web page. Is that complicated to set up? No, it's not complicated. It's called an image map or clickable image map. You can set up image maps either by using software such as FrontPage, GoLive, etc. or do it "by hand". If you're using software such as FrontPage, GoLive, etc., simply follow their instructions, then transfer the files into your Web space here. If you're doing it "by hand", or just want to know more about image map HTML, read on. You can set up image maps using either a client-side image map or a server-side image map. Basically, a client-side image map has the coordinates and URLs for the map file contained in the html file. A server-side image map has the coordinates and URLs for the map file contained in a separate .map file. No matter which type you set up, the basic procedure that's followed is: Create the Web page where the image map will appear. Create the graphic that will be the image map. Map out the areas on the image map. Transfer the files into your Web space. CLIENT SIDE IMAGE MAP: Create the Web page where the image map will appear. Create the graphic that will be the image map. Map out the clickable regions on the graphic, and link each region to a file name or URL. There are PC and Mac software packages that assist you in doing this. Examples are Adobe GoLive, Spinel Webmapper, Tarantula, Mapedit, GIF Construction Set, and more, which are available for download at sites such as Tucows. Or, you can use FrontPage's Image Map feature. You can use it with or without the extensions, since it's a feature that's supported even if the extensions are disabled. Save the finished results to the HTML file the image map will appear in. The HTML tags in your HTML file will look something like this: <img src="mygraphic.gif" usemap="#mygraphic" border="0"> <map name="mygraphic"> <area shape="poly" alt="North" coords="3,8 133,8 168,125 27,127" href="north.html"> <area shape="poly" alt="East" coords="173,71 292,71 325,180 208,180" href="east.html"> <area shape="poly" alt="South" coords="22,142 120,143 150,234 48,234" href="south.html"> <area shape="poly" alt="West" coords=148,165 189,164 200,196 156,196 148,167" href="west.html"> </map> If you're referencing a different area of the same Web page instead of a different Web page, insead of href="north.html", it would be href="#north". Then, in the destination on your Web page, the call is <a name="north"> </a> Transfer the .htm or .html file and graphic file into your Webspace. Note: If you decide to change your image map, the graphic that is the image map may or may not need to be updated - depending on whether you're simply changing the boundaries (coordinates) of clickable areas or adding/deleting/changing the look of the graphic file. If imagemap coordinates change, please remember that *every* file that contains the image map coordinates will also need to be updated. From a maintenance standpoint, a server-side image map is easier to manage. Top SERVER SIDE IMAGE MAP: Our Web server runs Apache software (the most popular Web server on the Internet). It supports NCSA style image maps. Normally, image maps are handled by an external CGI script. But to make things easier, our Web server has built-in image map processing which is easier and faster than using an external program. Create the graphic that will be the image map. Map out the clickable regions on the graphic, and link each region to a file name or URL. There are PC and Mac software packages that assist you in doing this. Examples are Spinel Webmapper, Tarantula, Mapedit, GIF Construction Set, and more, which are available for download at sites such as Tucows. Create the map file. Usually, this is done by saving the results in the form of a .map file, with the name of the map file the same as the name of your graphic file. A .map file looks similar to this: default nop.html poly north.html 3,8 133,8 168,125 27,127 poly east.html 173,71 292,71 325,180 208,180 poly south.html 22,142 120,143 150,234 48,234 poly west.html 148,165 189,164 200,196 156,196 148,167 This example map file defines four clickable regions and a default region which covers the area between regions. The first column is the type of region; it can be polygon (poly), rectangle (rect), circle (circle) or default. The second column is the URL (relative in this example) that will be called when someone clicks within the region. What follows the second column are the coordinates of the region. Now you need to add the HTML tags into your HTML code. It will look similiar to the following: <A HREF="mygraphic.map"> <IMG ISMAP SRC="mygraphic.gif"></a> mygraphic.map" is the map file. Notice that the IMG tag has an extra keyword -- ISMAP. ISMAP makes the image "active". "mygraphic.gif" is the actual image that you will be able to click on. Transfer the graphic, .map file and HTML file into your Web space. Note: If you decide to change your image map, the graphic that is the image map may or may not need to be updated - depending on whether you're simply changing the boundaries (coordinates) of clickable areas or adding/deleting/changing the look of the graphic file. If imagemap coordinates change, you'll only have to update one file to update the coordinates -- the .map file. Top Home > Help > Clickable Image Maps       Copyright © 1994-2008 by Minnesota MicroNet. All rights reserved.