Image Mapping

[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.

<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.

<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

[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.

[sh4d0w]

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

[Sugar]

You can use Imageready too right ? Works the same way ( in HTML codes )

[sh4d0w]

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.

[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

[pbguy434]

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

Yea, he said that.

[dmeister]

Yea, he said that

Are you addressing anyone in particular?

dmeister

[pbguy434]

The above poster . Reffering to:

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]

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