image mapping w/ almost nothing

HTML Tutorials

Tutorial

Click on thumbnailed images to enlarge

*Important, get rid of all the
</a>
in the coding because createblog demanded I have those but they dont help, they only hinder:]


This tutorial will only work for image maps. This is not meant for div layout image maps. Only simple image mapping.

First select your image
for me I will choose this image


open up notepad
now add an anchor link

and make a dummy link
so heres what I did

<a href=\"test.htm\"></a>

get rid of the

after you have done that lets include the image
<img src=\"YOURIMAGEURL\"></a>

after this you are going to add the ismap attribute

so in total so far you code should look like this

fill in the width and height attributes and now save the notepad file as "index.html"

right click and open in your browser

now hover over the image and look at the status bar blow, you will see numbers changing back and forth.
Here is is screen
link

Now that you got your coordinates you have to fill in the info

so lets do that next
to make an image map lets first include the image

<img src=\"YOURIMAGEURL\" width=\"XXX\" height=\"XXX\" border=\"0\" alt=\"\" usemap=\"ID?\"></a>


the "id" attribute is useless just name it whatever you please
ex. "map1"

then lets start adding the map









make sure that usemap="ID?" and map name="ID?" match up.

now a little explanantion about cooridnates
there are 4 number spots
the first 2 number spot are the beginning coordinates and the last 2 numbers are for the ending coordinates

so for example
view this image


so now let fill in the number spots with the example








now your probably going to have more than one link because it is an image map


fill it in :] and keep going.


keep going until your done with mapping this image

this tutorial was written by
Kevin Jo

Tutorial Comments

Showing latest 10 of 15 comments

That was confusing. ):

By CupcakeMonster on Jan 23, 2010 12:46 pm

you can just go here instead...

http://isdntek.c om/tagbot/imap.htm

By famous-last-words- on Oct 17, 2009 12:48 pm

it's even easier just to position a clear.gif link over the section of the
image / background you want linked.

By ingodwerust on Sep 20, 2009 6:06 am

So... what exactly is this for?

By HotShotAquarius on Jan 24, 2009 7:50 pm

thanks for your hints..........i will knw.......:)

By lokman on Jan 22, 2009 4:12 am

Not that well-written...but pretty good.
You can also use PSP for image mapping, or Adobe ImageReady. (ImageReady is free and comes with Adobe Photoshop, and you get to keep it forever. n_n)

By emmasawr on Nov 29, 2008 7:54 am

I already know how to do imagemapping.
I also have a program call meracl.

By dilligrout on Oct 28, 2008 3:17 am

thats was fung!

By vannes93 on Oct 10, 2008 4:54 am

nice, ill try this sometime soon xD

By Mizuro on Sep 23, 2008 1:27 pm

good one.. kerala

By kerala on Aug 7, 2008 1:27 am
View all »

Tutorial Details

Author synatribe View profile
Submitted on Jul 21, 2008
Page views 14,137
Favorites 29
Comments 15
Reviewer manny-the-dino View profile
Approved on Jul 22, 2008

Tutorial Tags