What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

image mapping..


javish

New Member
Messages
1
Likes
0
I need to find out how can I tell the size of an image by it's coordinates :/ I need to create and image with dimensions from (0,0) to (603,317) and I have no clue what would be the size of the image. After I make the image, with that size, I need to do some mapping on the image. I have no problems doing that but I'm lost as guessing the size of the image to fit those coordinates. Any ideas?
 
You can make an image map very quickly by following the steps below. This protocol assumes you have access to a web servable image, and a text editor for the html page you want to make the image map for.

What you need:
a gif or jpg image.
an idea/plan of what geometric shapes you want to divide your image into.
a list of URLs that you want each geometric shape to map to.
a web browser to use the imagemapper and see the result.
a text editor to edit the page you want to put the image map into.
The method below is for client side image maps (the html page will hold all the information for your map).

What to do:
Open your HTML page in your favorite HTML editor.
Select the html stuff below, copy it, paste it into your HTML page.
Edit the HTML for the client side image map by adding your own values.
Place the web address (URL) for your image in the img src tag.
replace the sample rectangle HTML stuff with your own shapes and URLS to point to in each <area> tag. Add or delete tags as you see fit.
Now you simply need to fill in the coordinates for all your shapes from the image. This is the next step.
Place the URL for your image into this box:
Get ready to click on the places that define the coordinates of the shapes in your image. (i.e. to define a rectangle click on the upper left corner, note the result, then click on the lower right corner, and note the result.).
Push this button. You'll get a page with your image in it. Clicking on your image will show you the location (x,y) of your mouse clicks.
Place the values returned from your mouse clicks into the coordinate locations of the <area> tags.
Save the results, and test your imagemap.
Congratulations! You're done.
 

Back
Top