| posted on: Jan 05, 2006 at 07:19:52 by Chocolate570 |
|
|
The Image Map Tool: Greatest gimp feature created for any web-builder.
Part I: Building the Map
Have you ever seen one of those very cool images or maps where you can click in different places on the image----but it's only one image?
That is either a Flash application, or it's an image map. Image maps are very commonly used throughout the internet.
In this tutorial, I will show you how to use the GIMP's tool that is the equivalent of a photoshop 'slice' for any PS users.
Starting off, we open the image we want to create an image map over.
This is mine:
Now, click filters>>web>>image map. A window will pop up.
This is what it should look like, without the lines and text:
Explanation:
A: Pointer Tool - Allows you to click around;normal cursor mode.
B: Rectangle Select - Allows you to map rectangular regions.
C: Elliptacle Select - Allows you to map elliptical regions.
D: Polygon Select - Allows you to map polygon regions, where you specify the sides.
E: Edit Area Info - Allows you to edit the currently selected area's settings (e.g., link, javascript...).
F: Delete Area - Deletes currently selected map region.
G: Zoom - Allows you to zoom into areas to get a clean cut.
H: Grid - Allows you to display a grid over the image, making it easier for you to get square cuts.
I: Map - Image preview where you draw the map with the tools A,B,C,and D.
J: Selection List - Displays all areas of the map.
Ok, now we know what the tools do---so next, click on a tool of your choice, and select the area you want to map, and another dialog should pop up.
The window:
I suggest you only fill out the first tab, and don't switch to the other tabs unless you are an advanced user.
It's straightforward, so i'm not gonna go over it. If you need help with this part, post. Don't touch the select buttons at the top.
Press ok, and keep selecting regions until you are done with your map.
Now, click "view" on the image map tool and click "Source...", and copy the text.
Finally, paste the code into your webpage's source, and change the src="" to the location of the image.
Congratulations, now you have a really cool logo, a great effect, and a professional look to your webpage.
To see what the tool can do, go
HERE
Part II: Putting it to Use
Most probably, all image maps you see on the web will not just contain links---they'll contain little flashy things that highlight if you put your mouse over. I'll discuss two ways to do this.
Subsection I: Multi-Image
The longer, but easier way.
First, open up the image you used in part I for your map. Now, with the rectangle tool, select a rectangle over the region of the map, in the REGULAR GIMP IMAGE WINDOW. Not in the image map window. This we are doing to the image itself. Try to match the rectangle with the region of the map your selecting.
Go to the layers dialog. Dialogs>>Layers, or ctrl+L for windows users. Click the new layer button.
Now, select your bucket tool. In the bucket tool settings, select "fill whole selection".
Fill in, on the new layer, the rectangle you selected earlier with white. Now, go to the layers dialog again, and set the opacity of your new layer to around 30, or whatever floats your boat. Now merge the two layers and save the image, but with a new filetype. DO NOT OVERWRITE YOUR OLD IMAGE, YOU WILL NEED IT! Save this as "x_y.z", where x=the name of your original image, y=a number, and z=your image filetype. Save without the quotes. This is how your image should look:
That is a part that you have to use your good judgement on, if white doesn't suit your image, then fill it in with grey or another color.
Repeat this with all of your links, remembering to advance the number at the end of your filename.
Now, go to your HTML page and add the image map code to it. Now, here comes the tricky part.
JavaScript Test, VERY BETA:
CODE:
<script type="text/javascript">
function switchImg(img,simg)
{
x=document.getElementById(img);
x.src=simg;
}
</script>
|
Now, you have to modify the area map code to make it switch the image. This is VERY tricky. Please read everything carefully, and i'll explain this as best I can. Pay attention to everything, and it'll be a snap to figure out and remember. Here we go.
This is something like what your map code should look like.
CODE:
<map name="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.0 -->
<!-- #$AUTHOR:XXXXXX -->
<area shape="rect" coords="90,240,180,255" alt=".:GimpTalk:. ~ GIMP Help & Tutorials" href="http://gimptalk.com" />
<area shape="rect" coords="210,240,285,255" alt="The GIMP - Greatest Graphic Program Ever" href="http://gimp.org" />
<area shape="rect" coords="300,240,375,255" alt="DaFont - Huge Resource of Thousands of Fonts" href="http://dafont.com/en" />
<area shape="rect" coords="390,240,450,255" alt="phpBB - Amazing Open Source php Bulliten Board" href="http://phpbb.com" />
</map>
|
Suppose we were going to change the image as if your mouse were over the gimptalk link.
<area shape="rect" coords="90,240,180,255" alt=".:GimpTalk:. ~ GIMP Help & Tutorials" href="http://gimptalk.com" />
If X=The URL of your gimp talk image and Y=The name of your link then this is what we add:
<area onclick="switchImg(this,X)" id=Y shape="rect" coords="90,240,180,255" alt=".:GimpTalk:. ~ GIMP Help & Tutorials" href="http://gimptalk.com" />
Meaning, you have to add
CODE:
onclick="switchImg(this,X)" id=Y |
to the every area thing.
Your image map is DONE!
UNDER CONSTRUCTION, COMING SOON!!!!
|
|
|
