0

I don't think this can be done, but I am trying it anyway hoping there is a solution!

sample is at www.meetmainstreet.com

I have a graphic representation of main street, and various points on it, on which I have added links using DW CS6 as follows...

<img src="streetmap_2.png" alt="Meet Marion North Carolina Main Street" name="mainmap" usemap="#mainmap" id="mainmap">
<map name="mainmap">
<area shape="circle" coords="337,144,12" href="http://youtu.be/WW0-HDOgeh8" alt="Marion Pharmacy">
<area shape="circle" coords="434,184,12" href="http://youtu.be/jipJdPSQCNg" alt="Austin Furniture">
<area shape="circle" coords="511,183,12" href="#">
<area shape="circle" coords="501,136,12" href="http://youtu.be/xqY1TB9Y1L0" alt="Killoughs Music and Loan">
<area shape="circle" coords="705,178,12" href="#">
 </map>

The page is built in the twitter Bootstrap2 css style, and when the image resizes automatically to fit a screen size the coords are off. Is there a way that I can do anything about it?

Thanks!

Bill Teale
  • 159
  • 3
  • 15
  • 1
    Juste google "responsive image maps". It's not possible with only HTML+CSS, but you may find a solution fitting your needs. – Laurent S. Apr 09 '14 at 14:46
  • Do you have to use image maps? or would you be happy to absolute position some invisible links over the image – James King Apr 09 '14 at 14:51
  • Thanks Bartude, I was googling but couldn;t find the right phrase I reckon to find exactly my issue, will try that one. And no James it doesn't have to be an image map as such. I was trying to avoid haveing lots of pegs on an embedded google map, looking for a more attractive way of doing it, so invisible links would be great – Bill Teale Apr 09 '14 at 15:05

1 Answers1

0

As you understood, there is no possibility with html and css, but maybe you could find solution is-possible-create-map-html-area-in-percentage in which they speak about a similar problem. Hope this help. :-)

Community
  • 1
  • 1
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77