Skip to main content
olivia lorek
olivia lorek
Participant
November 22, 2019
Answered

[Image Map] Coords

  • November 22, 2019
  • 2 replies
  • 1565 views

Hello Developers, I need assistance with an example: coords="230,303, 800" I had an email template made for me and I am trying to figure out how they determined the coords. The code made the phone number and address clickable, but I'm unsure how they determined the coords. Can someone help me with this?

 

[Topic edited by moderator.]

This topic has been closed for replies.
Correct answer osgood_

They are originated by drawing over the image in Dreamweaver.

 

Open a Dreamweaver file with any image in it, select the image by clicking on it then go >Window>Properties> You will be presented with a 'Map' menu where you can select a shape which you can use to draw 'hot-spots' over the image, which in turn create the co-ordinate positions.

 

I'm working from a very old version of Dreamweaver as I don't use it any longer, but find the 'Properties' menu for the image and the 'hot-spot' shapes should be available.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
November 22, 2019

Image maps are not responsive.  Hotspot coordinates will drift out of register when images are re-scaled to fit different sized devices.  I cannot imagine why an experienced developer would use image maps in a modern e-mail template when plain text links are much more reliable.

 

That said, to create image maps in DW, you need to switch to Design View from the document toolbar and open your HTML Properties Panel (Ctrl + F3) to reveal the hotspot tools -- rectangle, circle and polygon.   See screenshot.  In this example, my rectangular shape is drawn over a foreground image and linked to Google.com.

 

 

 

 

 

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
November 22, 2019

This is for an email template, which might be a fixed width and not responsive.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
November 22, 2019

I haven't used fixed-width e-mail templates in quite a while.  Have you?

 

 

 

 

Nancy O'Shea— Product User & Community Expert
O
osgood_Correct answer
Legend
November 22, 2019

They are originated by drawing over the image in Dreamweaver.

 

Open a Dreamweaver file with any image in it, select the image by clicking on it then go >Window>Properties> You will be presented with a 'Map' menu where you can select a shape which you can use to draw 'hot-spots' over the image, which in turn create the co-ordinate positions.

 

I'm working from a very old version of Dreamweaver as I don't use it any longer, but find the 'Properties' menu for the image and the 'hot-spot' shapes should be available.

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