|
Posts of topic : How To Create Image Maps For Websites
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 05, 2006 at 07:19:52 |
|
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!!!!
|
|
|
|
|
bobshandel
Member
Profile
Joined: Dec 10, 2005
Posts: 19
|
|
| posted on: Jan 05, 2006 at 08:18:25 |
|
thanks, awsome tut! 
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 05, 2006 at 08:24:40 |
|
|
No problem, any time. Did you find any parts difficult to understand?
|
|
|
|
|
bobshandel
Member
Profile
Joined: Dec 10, 2005
Posts: 19
|
|
| posted on: Jan 05, 2006 at 08:37:14 |
|
|
not to me, perfectly clear!
|
|
|
|
|
GIMP Galore
Member
Profile
Joined: Dec 22, 2005
Posts: 7
|
|
| posted on: Jan 05, 2006 at 08:39:12 |
|
|
Thanks for the tut. And to answer your question, everything was easy to understand and follow. Great job!
|
|
|
|
|
Leinad
Member
Profile
Joined: Jun 26, 2005
Posts: 188
|
|
| posted on: Jan 06, 2006 at 05:26:31 |
|
|
The next tutorial should be on making the icons glow or somthing when you put the cursor over them.
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 06, 2006 at 06:16:59 |
|
Thanks Ali, I appreciate it.
Icon glowing is unfortunatley not just gimp work. You would need some javascript/html. I might do it though, and just give the code pre-done.... hmmm.....
|
|
|
|
|
ShadowChild
Member
Profile
Joined: Dec 22, 2005
Posts: 74
|
|
| posted on: Jan 06, 2006 at 06:36:36 |
|
|
Wow, nice tut. I did not know about any of this.
|
|
|
|
|
/-\rtichoke
Member
Profile
Joined: Jul 14, 2005
Posts: 27
|
|
| posted on: Jan 06, 2006 at 09:19:00 |
|
YAY!
thanks you so much for this. the javascript part is easiest part though; just go to some site and get some code.
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 06, 2006 at 02:24:57 |
|
|
That part of the tutorial is under construction. The first sub-section will be done by tomorrow. :)
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 09, 2006 at 03:58:46 |
|
|
Almost done with the tut. I'm just working on the javascript part, and then i'll post the complete thing. For now, you can start working on the areas i've already covered. :)
|
|
|
|
|
-George-
Member
Profile
Joined: Nov 05, 2005
Posts: 87
|
|
| posted on: Jan 15, 2006 at 11:28:49 |
|
|
Thank you that will be very helpful.
|
|
|
|
|
-George-
Member
Profile
Joined: Nov 05, 2005
Posts: 87
|
|
| posted on: Jan 15, 2006 at 01:43:10 |
|
|
This is a n00b question, but if i wanted the whiole site to be a picture what size should i make it?
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 16, 2006 at 09:05:07 |
|
|
It's not reccomended that you make a whole site one picture, as then it takes forever to load the thing.
|
|
|
|
|
superzippergirl
Member
Profile
Joined: Jan 17, 2006
Posts: 2
|
|
| posted on: Jan 17, 2006 at 12:38:28 |
|
|
thanks I'm new to Gimp, and love webdesign so this helped out alot, if you want check out my site, freewebs.com/superzippergirl (thats where i used this, i havn't gotten it up yet so some of the links will bring you to broken profiles, but i'm proud of the image. I havnt' gotten to the second part of the tut yet but i still love it ^_^
|
|
|
|
|
Dark Aurora
Member
Profile
Joined: Jan 15, 2006
Posts: 24
|
|
| posted on: Jan 20, 2006 at 08:41:29 |
|
Really awesome tutorial!
Um...you know, the Image Map works very well indeed for me but if i need it for a site that only allows BBcode, then what should i do?
|
|
|
|
|
gowness
Member
Profile
Joined: Jan 15, 2006
Posts: 56
|
|
| posted on: Jan 20, 2006 at 09:15:11 |
|
|
wow, very nice tut, easy to fallow too.
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 20, 2006 at 09:34:49 |
|
I'm glad all of you like it!
@superzippergirl: Nice site. :)
@Dark Aurora: You can't do an image map with bbcode, sorry. :( Ask the admin if you can post the html.
@gowness: I'm glad it was easy to follow, that's what i was aiming for when I made it. :)
|
|
|
|
|
toontownmiser
Member
Profile
Joined: Dec 29, 2005
Posts: 18
|
|
| posted on: Jan 20, 2006 at 09:41:55 |
|
Wow, nice tut!  I love HTML, so i love Image map!
|
|
|
|
|
Dark Aurora
Member
Profile
Joined: Jan 15, 2006
Posts: 24
|
|
| posted on: Jan 21, 2006 at 12:57:15 |
|
QUOTE:
I'm glad all of you like it!
@Dark Aurora: You can't do an image map with bbcode, sorry. :( Ask the admin if you can post the html. |
Sigh...alright, thanks.
EDIT: I found a way. Yay!
|
|
|
|
|
punksnowboarder
Member
Profile
Joined: Oct 16, 2005
Posts: 64
|
|
| posted on: Jan 24, 2006 at 08:37:53 |
|
So what file type do we save it as? Sorry if it was in the tutorial, I sort of just skimmed over it... 
At least if I can make this work, then my web pages won't be so boring!!! Thanks!
|
|
|
|
|
Pootmister
Member
Profile
Joined: Jan 23, 2006
Posts: 110
|
|
| posted on: Jan 24, 2006 at 09:14:14 |
|
|
Wow, thats a nice tut! I'll try it later
|
|
|
|
|
Chocolate570
Member
Profile
Joined: Dec 15, 2005
Posts: 366
|
|
| posted on: Jan 26, 2006 at 04:23:23 |
|
Thanks poot, i'd love to see your outcome.
Punksnowboarder, the answer is in the tutorial. You don't save the file as anything.
QUOTE:
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.
|
|
|
|
|
|
|
Chief Executive Officer
