image mapping w/ almost nothing

HTML Tutorials


Click on thumbnailed images to enlarge

*Important, get rid of all the
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

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,994
Favorites 29
Comments 15
Reviewer manny-the-dino View profile
Approved on Jul 22, 2008

Tutorial Tags