How to link a map?

[shelbys89698548]

I'm trying to create code for a client-side image map (just a map, not a whole website) for a third party website provider so I don't have to pay them to do it.

The first set of code I sent them, I used a jpg of a map that I created in PS and linked by using image hotspots in DW. They said the code was not compatible.

From there I assumed it was because I simply used a jpg instead of exporting the map from PS as HTML.

After that step, now when I insert the gif in DW I don't have the option to add image hotspots anymore.

I though about slicing the image in PS but there's not option for a polygon tool.

What is the best way to proceed/ is what I'm trying to accomplish even possible?

This is the map: I all I want to so is add a link to a webpage for each set of counties

[Jon Fritz]

The code was likely incompatible because the image will be responsive online.

Standard image map <area> tags don't resize when an image does, which makes the image map links appear to break when an image is larger or smaller than it was in design. In order to make an image map responsive, you would need to use javascript. There are more than a few "jquery responsive image map scripts" available online that would probably do the trick.

If "responsiveness" wasn't the reason for the incompatibility, we would need to know the actual reason to give you a better idea of what you would need to do.

[Nancy OShea · Accepted solution]

Static image maps are not used much anymore because the web has gone responsive to support Tablet & Mobile web devices.  

There are JavaScript hacks you can use to make hotspot cooridinates re-align with responsive image maps but it's not ideal for all situations.  You would have to check with the 3rd party to see if it's viable or not.

Responsive Image Maps jQuery Plugin

The alternative is to use SVG.  Illustrator can output vector images to SVG but the hotspot areas & links will have to be manually coded.

the new code – Create A Responsive Imagemap With SVG

[shelbys89698548]

Thank you, this was very helpful, but now I've run into another problem.

When exporting the map as an SVG on AI it gives me nearly 30000 lines of code in DW.

I've been watching several tuts but in each of them the code clean up is very minimal. Do you have any idea of what this issue could be?

[Nancy OShea]

I'm guessing you generated an enormous SVG from a bitmap which is the worst thing you could do.  You need a vector image to start with.   Vector to SVG will generate much less code and a smaller file size.

[shelbys89698548]

I actually realized it was due to me choosing "embed" instead of "link" for image location setting.

Can a third party the html if the image is linked rather than embedded?

[Nancy OShea]

These are the  SVG settings I typically use in Illustrator (sorry for the old screenshot).

I take the resulting SVG code and paste it into my HTML document.

Nancy