Participant

Answered

Image Map

Forum|Forum|8 years ago
April 17, 2017
2 replies
1119 views

Hi guys I do newsletters in work and I'm having some issues with Dreamweaver Image Maps,

Map’s won’t co-operate for me if the design is similar to Screen Shot 1 “Mapped areas in green" For whatever reason only one link works even though there is 2 or 3 separate links in the code.

I have no issue with Maps when the areas are sectioned horizontally like Screen Shot 2 “Mapped areas in blue red & green"

and

Screen Shot 3 “Mapped areas in blue & green"

Some tips would be great 🙂

Thanks guys

This topic has been closed for replies.

Correct answer Jon Fritz

Standard HTML Image Maps are not responsive by nature. They are created by using fixed coordinates, if the image changes size, the coordinates do not and you get what seems to be image maps that don't work.

They do work, but only at the browser window size they were designed at.

If you absolutely must use image maps, you'd have to use javascript to get them to resize as the window/image is resized. Do a search for "responsive javascript image maps" and you should be presented with a fair number of possible solutions.

Nancy OShea

Community Expert

The thing with HTML emails/newsletters is everyone has different email clients with various limitations. Some people see HTML emails very well, many do not. Many have image blocking for security reasons. The only thing you can be reasonably certain of is that people will see plain text. HTML image maps & CSS background images in emails are very hit & miss and mostly a miss.

HTML E-Mail & Newsletter Blasts - http://alt-web.com/

Nancy

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

The answers are in your code.

Without seeing what you're actually working with, it's all guess work.

My guess would be you're attempting to use image maps on a responsive image and they're disappearing on you when the image scales down. It would be more noticeable on vertically aligned than when horizontally aligned.

Could you post all of your code for the page, or better yet, a link to your work in progress at a test location on a server you have access to?

stephanieo73799811Author

Participant

Thank you so much for your reply and apologies for my delay.

Yes I'm using image maps on a responsive image and only one link works across all devises please see code,

Code nefore image maps

<tr>

</tr>

<tr>

image map code

</map>

Jon Fritz

Correct answer

Community Expert

Standard HTML Image Maps are not responsive by nature. They are created by using fixed coordinates, if the image changes size, the coordinates do not and you get what seems to be image maps that don't work.

They do work, but only at the browser window size they were designed at.

If you absolutely must use image maps, you'd have to use javascript to get them to resize as the window/image is resized. Do a search for "responsive javascript image maps" and you should be presented with a fair number of possible solutions.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded