Image Mapping

Printable View

02-27-2005, 08:29 PM
sh4d0w

Simple way to link things anywhere on the image. This is good if you want to have a navigation bar without having too many slices.

You will need to find out the coordinates by opening Adobe and using the Info window.
go to window > Info

Okay here is the code.

Add this before the Image code.

Code:

<MAP name='mapname'> * * * * <area shape='rect' coords='topleft,corner,lowerright,corner' href='src.htm' target='_new'> * * * * <area shape='rect' coords='topleft,corner,lowerright,corner' href='src.htm'> * * * * <area shape='rect' coords='topleft,corner,lowerright,corner' href='src.htm'> * * * * </MAP>

topleft,corner = x,y
lowerright,corner= x,y

dont use spaces to seperate them.
Note: Only use the target code if you plan on directing that link to a frame.

Next comes the image that will be used with this map.

Code:

<img src='image.jpg' width='size' height='size' usemap='#mapname'>

It is important that you put the # before the map name. If it doesn't have it, it wont work. also make sure the width and height of the image are exact, this makes it easier for the mapping to work. Another thing, capitalization does matter. so MapName is not the same as mapname.

Let me know how you like it ! (= or if something isn't right let me know also !

Edit: Finally worked on an example, Hopefully crofty doesn't mind me using his render for this example.
Example

-sh4d0w
03-01-2005, 03:21 PM
pbguy434

I might have to start using image maps more. I like the way it turned out, loading everything at the same time and not piece by piece.
03-01-2005, 10:10 PM
sh4d0w

Quote:

Originally posted by pbguy434@Mar 1 2005, 02:21 PM
I might have to start using image maps more.* I like the way it turned out, loading everything at the same time and not piece by piece.

[snapback]12064[/snapback]

I'm glad you liked it! I'll be posting more useful tuts later!
-sh4d0w
03-06-2005, 06:10 AM
Sugar

You can use Imageready too right ? Works the same way ( in HTML codes )
03-06-2005, 10:49 AM
sh4d0w

Quote:

Originally posted by Sugar@Mar 6 2005, 05:10 AM
You can use Imageready too right ? Works the same way ( in HTML codes )

[snapback]14380[/snapback]

I dont know. I do all the coding myself. I dont use programs to help me \= but I wouldn't use a program to help. because if at a later time there is a problem with the coding I know where the problem lies, as to when it's made for me, i have to look through everything just to find the problem. ;)
03-06-2005, 07:59 PM
dmeister

For image maps with complex polygonal shapes (say a map of the US with each state as a hot region), a program like ImageReady can help you determine the map coordinates much faster and more accurately.

dmeister
03-08-2005, 08:55 AM
pbguy434

Quote:

You will need to find out the coordinates by opening Adobe and using the Info window.
go to window > Info

Yea, he said that.
03-08-2005, 03:52 PM
dmeister

Quote:

Yea, he said that

Are you addressing anyone in particular?

dmeister
03-08-2005, 04:36 PM
pbguy434

The above poster ;) . Reffering to:

Quote:

For image maps with complex polygonal shapes (say a map of the US with each state as a hot region), a program like ImageReady can help you determine the map coordinates much faster and more accurately.
03-08-2005, 05:00 PM
dmeister

Quote:

Yea, he said that.

Actually, what he said was to use the Info window in Photoshop to determine the basic coordinates of a simple rectangular image map slice.

Sugar then asked:

"You can use Imageready too right ?"

To which the response was:

"I dont know. I do all the coding myself. I dont use programs to help me \= but I wouldn't use a program to help"

To which I replied that using the image map features of a program like ImageReady is considerably easier, more accurate, and more efficient for creating image maps with complex polygonal shapes. That is to say, while "Adobe Info Window" may be fine for simple rectangular image map slices, it is would be a painstaking process to compute and generate the image map code for a map with complex shapes (a map of the US, for example).

dmeister
03-20-2005, 09:37 AM
pbguy434

Ah, gotcha. Sorry for comin out sort of harsh.
03-20-2005, 09:51 AM
Illegalx17

sweet thanx. im still confused on the coordinates tho. do we put like the x and y of the lower corner then x and y of the higher or something?
03-20-2005, 11:15 AM
sh4d0w

Quote:

Originally posted by Illegalx17@Mar 20 2005, 08:51 AM
sweet thanx. im still confused on the coordinates tho. do we put like the x and y of the lower corner then x and y of the higher or something?

[snapback]21326[/snapback]

Yea, first the x and y coordinates of the top left corner and then the x and y coordinates of the bottom right corner
04-20-2005, 06:44 AM
unit_number_43

Image map is evil! EVIL! use div's and float them over a background image. Much better, and cleaner...and movable.