vigeant's Avatar
vigeant 4
8 Asked
1 Answered
0 Best
0
No one has voted on this question yet :(
2 years, 4 months ago

I have a picture with 4 distinct parts that I want to put on my website. When a part is clicked I want it to take me to a different URL.

If you look at the photo above in question.

you can see that the sections do not have clear rounded edges... and I need when someone clicks on the links labeled: 1,2,3, and 4 for each of them to bring the user to a different website.

What is the best way to do this?

OR

The best tool to do this?

Thanks,

With love,

luke.
images:
Tip for best answer: M$5.55
Separate topics with commas, or by pressing return. Use the delete or backspace key to edit or remove existing topics.

You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.

M$

What is Your Answer?

0
0
0

2 Answers

0
wy's Avatar
wy | 2 years, 4 months ago
0
This is called "image map".

There is this free online HTML image mapping tool that is easy to use and easy to understand.
http://www.image-maps.com/
There is a video tutorial in the website.

An example of how US map is made into image map.
http://www.image-maps.com/united_states.php
You can see how polygons are drawn to make it into image map.

Some other tools:
http://www.online-image-editor.com/
http://www.kolchose.org/simon/ajaximagemapcreator/
http://www.imagecure.com/index.html

Wikipedia lists of image map tools:
http://commons.wikimedia.org/wiki/Commons:Image_map_resources

Hope this helps.
source(s):
websites mentioned in texts.

You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.

M$
wy's Avatar
wy | 2 years, 4 months ago Report

Thanks.
Which one do you finally choose to use ?

Report Abuse

Post Reply Cancel
0
socalsue's Avatar
socalsue | 2 years, 4 months ago
8
Here is an example of how your write the code yourself:
http://www.w3schools.com/TAGS/tag_map.asp
You need to know that you have to approximate the image areas with geometric shapes such as circle, square or rectangle.

You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.

M$
socalsue's Avatar
socalsue | 2 years, 4 months ago Report

With shape as poly, you can get a rough approximation with a series of coordinates. I don't know if there is an upper limit on coordinate pairs. Remember to close with same coordinates you started with.

I'm not familiar with web image maps that are not dependent on geometry. Looking forward to learning something new.

kalvindale's Avatar
kalvindale | 1 year, 10 months ago Report

I like this particular article it gives me an additional input in the information a round the world. Thanks a lot and keep going with
posting such information.
=======================================================
Mortgages

vigeant's Avatar
vigeant | 2 years, 4 months ago Report

Appreciate the answer, but as per the attached picture they are not geometric shapes.

kalvindale's Avatar
kalvindale | 1 year, 10 months ago Report

I like this particular article it gives me an additional input in the information a round the world. Thanks a lot and keep going with
posting such information.
=======================================================
Mortgages

Report Abuse

Post Reply Cancel

Learn something new with our FREE educational apps!

Private lessons in the comfort of your own home. Get back in shape or finally pick up a guitar with our great experts guiding you the whole way!
Learn Guitar
Learn Hip Hop
Learn Pilates