Skip to main content
shelbys89698548
shelbys89698548
Participant
August 22, 2017
Answered

How to link a map?

  • August 22, 2017
  • 2 replies
  • 819 views

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

This topic has been closed for replies.
Correct answer Nancy OShea

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

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
August 22, 2017

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

Nancy O'Shea— Product User & Community Expert
shelbys89698548
shelbys89698548Author
Participant
August 23, 2017

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
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 23, 2017

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.

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
August 22, 2017

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices