Links in images?

Question

I'm setting up a website and I need to know how to put individual links in an image. Here's the image (http://i162.photobucket.com/albums/t263/lizxo11/usa-map.jpg

I have separate paragraphs (on the same page) for each state. How can I make it so that if you click on a state, it will bring you down to the states' paragraph?

Answer 1

you will first need to create an image map, this is what they are:
http://en.wikipedia.org/wiki/Image_map

you can then create a seperate state-shaped link for each area of the picture you specify in the code:
http://www.htmlcodetutorial.com/images/images_famsupp_220.html

this essentially means you'll have to map out each individual state of the map, and specify a link for every one.

this is less tedious when using a program to create the image map for you - here are two free pieces of software:
http://pidg.in/?p=23
http://www.boutell.com/mapedit/download.html

now, to create links which jump to specific places in a page you'll need to 'name' them in your code by using this tag:


then in the link on your image map, refer to it:


see this for more information about naming paragraphs:
http://www.htmlcodetutorial.com/linking/_A_NAME.html

the combination of mapping out your image, naming each state's paragraph, then using that name on the links in your image map will result in the page jumping to the paragraph about the state when that state is clicked on the map.

Answer 2

Difficult, but...

What I did, with counties in my state was, create an image map, a la (for example)



...of course, you could get even more granular and tedious about the coordinates and the shapes with which you want to reference the state html files...