In this tutorial, I'm going to show how to image map with MS Paint. This is more work than having a program do it, but it's really not that tough. Keep in mind that this won't be the best tutorial because somewhere along the line, I lost my gift for explaining things.
First of all, an image map is coordinates used to define specific areas for each link on a single image. Yeah that probably didn't make sense, but basically an image map makes it so that a single image has multiple links. You've probably seen this in many layouts by now.
When you code an imagemap you must determine what shape you're going to use. This will make more sense once we get deeper into the tutorial..hopefully. There are three shape values you can use: "rect"(rectangle), "circle", or "poly"(polygon).
Out of all the layouts I've seen here at BR, the only shape I've seen used is "rect". And to be totally honest that's the only one I use to, though I have tried the others just for the hell of knowing how to =).
Rect
Alright, here we go. First open up the image you want to imagemap in MS Paint. I'll be using this one:
^You can save this image and follow along if you wish =). Actually, I highly recommend that you do.
Before doing anything else you have to make sure that you have "Status Bar" checked off at the top. At the top, View>>Status Bar(don't click it if it's already checked off).
The coordinates are displayed in the status bar, so you need for it to be displayed. For a rect shape you need only two coordinates: top left and bottom right or bottom left and top right.
So, take your cursor and place it over the top left of your first link. Then look to the
bottom right for the coordinates.
^I tried to get a bit of the color palette into the screenshot so you guys get the general idea of where the coordinates are located on the status bar. Record the coordinates you found for the top left corner.
Now find the coordinates for the bottom right corner and record them. Are you getting this so far?
Find the coordinates for the rest of your links, remember it's just the top left corner and the bottom right corner.
If you're using my image, this is what I have so far(top left, bottom right): Home - 0,1,74,26 Blogring - 77,0,153,26 S&T - 154,1,229,26 Xanga - 228,0,304,26 Blogger - 306,0,389,26 Rachel - 393,0,483,26
You don't have to get the exact coordinates that I did. If yours are just a bit different than mine, that's perfectly fine. And if you did bottom left and top right or you're using your own image, your numbers are going to be totally different from mine =).
Well, now that the coordinates have been recorded it's time write up the HTML. Yay! ^_^
The map is contained between <map> </map> tags(creative huh?). When using the map tag you must also use the name attribute to specify a name for your map.
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><map name="your name here"></td></tr></table><div class='postcolor'>
Replace "your name here" with whatever you want to name your image map. It doesn't really matter. I will name my map cookie.
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><map name="cookie"></td></tr></table><div class='postcolor'>
Now it's time to specify the link areas! For this we use the area tag =P.
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><area shape="rect" coords="0,1,74,26" href="http://www.google.com"></td></tr></table><div class='postcolor'>
I used three attributes with this tag, all of which are necessary. shape attribute - This attribute is used to specify the shape, remember? Rect, circle, or poly. Hopefully you guys know which one we're doing =P. coords attribute - I think this is pretty obvious. You use this to assign your coordinate values. href - You use this attribute to assign the link destination. Basically the value of this attribute is the URL of the webpage you want the hyperlink to bring the user to.
Repeat the area tag for as many links you have. Then when you're done, close your map with </map>.
Here's the code for my map:
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><map name="cookie">
<area shape="rect" coords="0,1,74,26" href="http://www.google.com">
<area shape="rect" coords="77,0,153,26" href="http://www.blogring.net">
<area shape="rect" coords="154,1,229,26" href="http://www.blogring.net/index.php?showforum=8">
<area shape="rect" coords="228,0,304,26" href="http://www.xanga.com">
<area shape="rect" coords="306,0,389,26" href="http://www.blogger.com">
<area shape="rect" coords="393,0,483,26" href="http://www.blogring.net/index.php?showuser=1052">
</map></td></tr></table><div class='postcolor'>
But wait! We're not done yet, though we're awfully close.
Upload your image to whatever image host you use. Then fill in with the correct stuff:
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><img src="URL OF YOUR IMAGE HERE" usemap="#your map name here" border="0"></td></tr></table><div class='postcolor'>
For usemap you fill in the name of your map. You remember, when you named your map? I named mine cookie. Mine would look like this:
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><img src="http://img252.echo.cx/img252/6446/navi1bq.gif" usemap="#cookie" border="0"></td></tr></table><div class='postcolor'>
It must be preceded by a # symbol.
Now we're done! Wasn't so hard right? I hope not and I hope I didn't confuse anyone.
Now put together my whole code looks like this:
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><map name="cookie">
<area shape="rect" coords="0,1,74,26" href="http://www.google.com">
<area shape="rect" coords="77,0,153,26" href="http://www.blogring.net">
<area shape="rect" coords="154,1,229,26" href="http://www.blogring.net/index.php?showforum=8">
<area shape="rect" coords="228,0,304,26" href="http://www.xanga.com">
<area shape="rect" coords="306,0,389,26" href="http://www.blogger.com">
<area shape="rect" coords="393,0,483,26" href="http://www.blogring.net/index.php?showuser=1052">
</map>
I hope you guys understood this =). If you need me to clarify on anything, just post or PM me. I think I will add "circle" and "poly" when I'm feeling more motivated.
[Only registered and activated users can see links. ]
huh. i was planning to do a tutorial on this. i've been image-mapping on paint for a while and had to make the code myself, and it's not that hard. anyway- excellent tutorial. good explanations ^_^
thank you thank you thank you!!!!! :P im gonna try on another image now :P
__________________ http://img111.imageshack.us/img111/1451/madworld7yz.gif
pull up my sleeve and see...... [Only registered and activated users can see links. ]<---cLiCkIt...and...cLiCkIt--->[Only registered and activated users can see links. ]
It shows that you are unregistered. Please register with us by clicking Here
Never knew I could do image map...
Linear Mode
