MapThis is an image map program, you load in an image
and draw circles, or squares or polygons of your choice, you assign a URL to
each of the circles, squares, or polygons then when someone click in that area
of the image they will be whisked away as if by magic to the URL you have assigned
to that area.
MapThis is capable of doing 3 different types of Image
maps, we will deal only with the client side image map.
1. download and install MapThis
2. run MapThis
You should now see a screen like {Fig 1} but probably bigger, I resized mine so the images would be smaller here
3. Click on File {Fig 2-1} Preferences {Fig 2-4}
4. set the following {Fig 3-3, 4, 6} the rest are pretty much optional, as you prefer them to be. Don't be afraid to play with the settings.
NOTE: CSIM is for Client Side Image Map (this is all that is covered in this tutorial)
5. Click OK {Fig 3-16}
You should now see {Fig 4} you can choose to never see this again by checking {Fig 4-1}
6. Click Okay {Fig 4-2}
7. Locate and choose the image file you want to use for your map {Fig 5-1}
8. Click Open {Fig 5-2}
Now your image is loaded and your ready to go to work.
1. choose the type of shape you want to make hot
{Fig
6-1} Rectangle would be good for any of the text like Home {Fig
6-10}, Page1, Page2, Page3 or the long bar {Fig
6-11}
{Fig 6-2}
circle would be good for a round area like the button
{Fig 6-9}
{Fig 6-3}
Polygon would be good for an odd shape like {Fig 6-12}
The shape you choose is up to you depending on your application.
I could not get an actual screen shot of the pointer Mapthis uses so you just have to imagine that part : )
place the pointer where you want to start the hot area left click and drag you mouse to get the size of the hot area you want.
When you release you should see a dialog box like {Fig 7}
2. Fill in the URL of the site/page you want this hot spot to go to when clicked {Fig 7-1}
3. Fill in any target (if to a specific part of a page) or frame name(if your using frames) {Fig 7-2}
4. {Fig 7-3} is like the ALT tag of an IMG SRC, when the mouse is held over this hot spot, the text in {Fig 7-3} will popup
5. Click OK {Fig 7-4}
For the purposes of this tutorial this is the only hot spot we will create just enough to give you the idea, MapThis will support many many more.
Now click on the little diskette {Fig 1-6} to save
Now the fun part : )
1. enter a title for your new image map, I used test for my examples {Fig 8-1}
2. enter your name if you want to make sure folks who look at your source know who it was that did this {Fig 8-2}
3. The default URL should be your main page URL, if using frames use the opening URL, if not using frames you can use the URL of the page the image map is on or your main URL {Fig 8-3}
5. here you can describe what the image is and what it is used for {Fig 8-4}
6. make sure CSIM is checked {Fig 8-6}
7. Click OK {Fig 8-5}
8. type in the name you choose to call this file (I used test.htm here for the example) {Fig 9-1}
NOTE: be sure to remember where you are saving too.
9. Make sure that HTML {Fig9-4} is checked
10. Click Save
Now using NotePad or other text editor, open the file you just saved.
You should see the following
Although the save includes the <BODY></BODY> tags you don't need them, what you will do is copy everything except the <BODY></BODY> tags and paste them just above your </BODY> tag, last thing before the end of the page. I have tried pasting even after the </HTML> tag and it still works. You can also delete any lines that begin with <!-- they are not required for the image map to work, but the information is sometimes handy. In HTML <!-- is just remarks doesn't effect the page or code.
Now where ever you want the image map to appear you put the following:
<IMG SRC="NameOfImageUsed" USEMAP="#MapName">
if you do not want the hyperlink border around the entire image include the BORDER="0" attribute
<IMG SRC="NameOfImageUsed" USEMAP="#MapName" BORDER="0" >
in my example I use an image named mapthis1.gif so my tag would read
<IMG SRC="mapthis1.gif" USEMAP="#test" WIDTH="400" HEIGHT="40" BORDER="0">
and here is what we got
Happy imagemapping : )
In this example only the rectangle is an active link.
Best view with |
