Trying to Creat an image map - not working

DNU · June 15, 2021

Site URL: https://dnu.org/religious-freedom

Hello,

I have a jpg - an image i have created that i would like to post on our website but have multiple links on this image. I followed directions to use www.image-map.net and i get the image, but the links are not there....help!

Edited June 15, 2021 by DNU
incorrect url

creedon · June 16, 2021

Please see the following for a partial explanation of why it doesn't work.

I tried converting your image map as I've done for others but there are problems.

There are many rectangles in an area that I assume are not what you want.

There are circles that seem to be targeting points of interest/action points but the circles had no radii on them. I had to put them in to see them.

The first thing I suggest is use rectangles always. The target areas of you image are very rectangular.

The image map tool is not particularly user friendly or forgiving of mistakes. You have to be hyper-aware of what you are doing to get good results

If you can get a better image map out of the tool I'd be happy to take a another crack at converting it to a responsive image map.

DNU · June 16, 2021

ok so i remade the image map using rectangles and removed the old code and put the new code in but still the same situation.

I do have a "syntax error on line 1" in the custom css section - would that be causing an issue?

At any rate, the image populates through the code block but there are no links.

dnu.org/religious-freedom

creedon · June 17, 2021

Excellent! The new image map is much better.

The syntax error in Custom CSS should not effect the image map code. The problem as explained in the various posts is that image maps as built by image-net really don't work on the responsive web. They need to be modified.

You should take care of the syntax error in your Custom CSS but that is not related to what we are doing here.

Replace the code in your code block with the following.

<!--

  responsive image map template
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    .image-overlay-wrap {
    
      display : inline-block; /* shrinks container to image size */
      fill : transparent;
      position : relative;
      
      }
      
    .image-overlay-wrap img { /* optional, for responsiveness */
    
      display : block;
      height : auto;
      max-width : 100%;
      
      }
      
    .image-overlay-wrap svg {
    
      left : 0;
      position : absolute;
      top : 0;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="https://static1.squarespace.com/static/55844033e4b0b4466f11c152/t/60ca3383ad2b294764d7815a/1623864195935/website+doc.jpg">
    
    <svg viewBox="0 0 2485 4120">
    
      <a alt="Equality Act" href="https://www.dnu.org/equalityact" title="Equality Act" xlink:href="https://www.dnu.org/equalityact">
      
        <rect height="750" width="350" x="115" y="1873">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Equality Act" href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-24-equality-act" title="Prayer Intention - Equality Act" xlink:href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-24-equality-act">
      
        <rect height="35" width="270" x="547" y="2535">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Free Speech" href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-29-free-speech" title="Prayer Intention - Free Speech" xlink:href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-29-free-speech">
      
        <rect height="35" width="270" x="547" y="2583">
        
          </rect>
          
        </a>
        
      <a alt="Attacks on Healthcare" href="https://www.usccb.org/resources/Federal-Conscience-Laws-Fact-Sheet.pdf" title="Attacks on Healthcare" xlink:href="https://www.usccb.org/resources/Federal-Conscience-Laws-Fact-Sheet.pdf">
      
        <rect height="750" width="350" x="1455" y="1860">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Conscience Rights" href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-27-conscience-rights-medical" title="Prayer Intention - Conscience Rights" xlink:href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-27-conscience-rights-medical">
      
        <rect height="35" width="350" x="1882" y="2535">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Social Services" href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-23-catholic-social-services-during-pandemic" title="Prayer Intention - Social Services" xlink:href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-23-catholic-social-services-during-pandemic">
      
        <rect height="35" width="297" x="1879" y="2583">
        
          </rect>
          
        </a>
        
      <a alt="Attack on the Human Person" href="https://www.mncatholic.org/advocacyarea/gender-theory/" title="Attack on the Human Person" xlink:href="https://www.mncatholic.org/advocacyarea/gender-theory/">
      
        <rect height="750" width="350" x="117" y="2877">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Gender Theory" href="https://www.mncatholic.org/pope-francis-gender-theory/" title="Prayer Intention - Gender Theory" xlink:href="https://www.mncatholic.org/pope-francis-gender-theory/">
      
        <rect height="50" width="310" x="547" y="3604">
        
          </rect>
          
        </a>
        
      <a alt="Attacks on Catholic Institutions" href="https://www.usccb.org/news/2021/us-bishop-chairmen-reaffirm-protections-faith-based-foster-care-and-adoption-providers" title="Attacks on Catholic Institutions" xlink:href="https://www.usccb.org/news/2021/us-bishop-chairmen-reaffirm-protections-faith-based-foster-care-and-adoption-providers">
      
        <rect height="750" width="350" x="1453" y="2880">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Adoption &amp; Foster Care" href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-22-adoption-and-foster-care" title="Prayer Intention - Adoption &amp; Foster Care" xlink:href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-22-adoption-and-foster-care">
      
        <rect height="35" width="465" x="1880" y="3557">
        
          </rect>
          
        </a>
        
      <a alt="Prayer Intention - Vandalism" href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-25-church-vandalism" title="Prayer Intention - Vandalism" xlink:href="https://www.usccb.org/committees/religious-liberty/religious-freedom-week-2021-june-25-church-vandalism">
      
        <rect height="35" width="379" x="1879" y="3610">
        
          </rect>
          
        </a>
        
      <a alt="Food Truck" href="https://www.dnu.org/the-prairie-catholic-1/2021/2/24/come-thou-long-expected-jesus-advent-2020" title="Food Truck" xlink:href="https://www.dnu.org/the-prairie-catholic-1/2021/2/24/come-thou-long-expected-jesus-advent-2020">
      
        <rect height="60" width="272" x="208" y="3900">
        
          </rect>
          
        </a>
        
      <a alt="Catholic Schools in Person Classes" href="https://www.dnu.org/the-prairie-catholic-1/2021/2/24/bishop-levoir-retires" title="Catholic Schools in Person Classes" xlink:href="https://www.dnu.org/the-prairie-catholic-1/2021/2/24/bishop-levoir-retires">
      
        <rect height="60" width="751" x="801" y="3900">
        
          </rect>
          
        </a>
        
      <a alt="Energy Assistance" href="https://www.dnu.org/the-prairie-catholic-1/2020/7/31/as-we-grieve-the-coronavirus-look-to-mary-mother-of-sorrows" title="Energy Assistance" xlink:href="https://www.dnu.org/the-prairie-catholic-1/2020/7/31/as-we-grieve-the-coronavirus-look-to-mary-mother-of-sorrows">
      
        <rect height="60" width="398" x="1864" y="3900">
        
          </rect>
          
        </a>
        
      <a alt="Covid Relief" href="https://www.dnu.org/the-prairie-catholic-1/2021/2/24/bishop-levoir-retires" title="Covid Relief" xlink:href="https://www.dnu.org/the-prairie-catholic-1/2021/2/24/bishop-levoir-retires">
      
        <rect height="60" width="297" x="343" y="3990">
        
          </rect>
          
        </a>
        
      <a alt="Renter &amp; Home Owner Relief" href="https://www.dnu.org/communications" title="Renter &amp; Home Owner Relief" xlink:href="https://www.dnu.org/communications">
      
        <rect height="60" width="696" x="1248" y="3990">
        
          </rect>
          
        </a>
        
      </svg>
      
    </div>

Let us know how it goes.

DNU · June 17, 2021

thank you - thank you - thank you!

It now works - www.dnu.org/religious-freedom

However, i just realized my date is incorrect so i need to make that change on my artwork so i may need to recreate the whole thing.

The code that you gave me, i understand includes code for an image overlay - which is the interactive portion? If i change the actual jpg - can i use the code yet for the overlay? So i have to change the date from June 26-29 to June 22-29 - that will be the only thing i change on the .jpg. Will i still be able to upload the image to squarespace and use the same code?

DNU · June 17, 2021

it worked! I re-uploaded the image and replaced the img src line with the new location and it looks like everything works!

Thank you again so much!

In the future, if i want to create a new document that is an image map, i would need to do the overlay. Is there a website that can be done at? or would i just use that same coding at the beginning?

creedon · June 17, 2021

Excellent!

Unfortunately as far as I know, no one has created a website to do what image-map.net and similar sites do for an SVG overlay.

Following is the basic template I created which of course needs to be filled in with the proper information.

<!--

  responsive image map template
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    .image-overlay-wrap {
    
      display : inline-block; /* shrinks container to image size */
      fill : transparent;
      position : relative;
      
      }
      
    .image-overlay-wrap img { /* optional, for responsiveness */
    
      display : block;
      height : auto;
      max-width : 100%;
      
      }
      
    .image-overlay-wrap svg {
    
      left : 0;
      position : absolute;
      top : 0;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="[enter image url here]" />
    
    <svg viewBox="0 0 [enter image width here] [enter image height here]">
    
      [enter anchor/svg shape tags here]
      
      </svg>
      
    </div>

Image maps and SVG use different syntax to express the coordinates of the objects. What I did was make that conversion.

DNU · June 17, 2021

thank you again for all your help.

It is greatly appreciated!

sydneyhales · December 24, 2022

Hi! I am having a similar issues in which I created my image map code on https://www.image-map.net/ but it is not working for me in squarespace. could anyone please advise? I am kinda on a time crunch so if calling my cell is easier to explain the steps then I'm all for that! Thank you again to anyone who can help - greatly appreciated!

sydneyhales · December 24, 2022

here is my website: https://red-dogfish-7pfk.squarespace.com/config/pages

working specifically on this page: https://red-dogfish-7pfk.squarespace.com/config/pages

And this is the image I am using:

And the code I was given:

<img src="Favorite Things FINAL jpg.jpg" usemap="#image-map">

sydneyhales · December 24, 2022

Hi! I am having some coding issues - I created my image map code on https://www.image-map.net/ but it is not working for me in squarespace. could anyone please advise? I am kinda on a time crunch so if calling my cell is easier to explain the steps then I'm all for that! Thank you again to anyone who can help - greatly appreciated!

here is my website: https://red-dogfish-7pfk.squarespace.com/config/pages

working specifically on this page: https://red-dogfish-7pfk.squarespace.com/config/pages

And this is the image I am using:

And the code I was given:

<img src="Favorite Things FINAL jpg.jpg" usemap="#image-map">

tuanphan · December 29, 2022

On 12/25/2022 at 2:56 AM, sydneyhales said:

Hi! I am having some coding issues - I created my image map code on https://www.image-map.net/ but it is not working for me in squarespace. could anyone please advise? I am kinda on a time crunch so if calling my cell is easier to explain the steps then I'm all for that! Thank you again to anyone who can help - greatly appreciated!

here is my website: https://red-dogfish-7pfk.squarespace.com/config/pages

working specifically on this page: https://red-dogfish-7pfk.squarespace.com/config/pages

And this is the image I am using:

And the code I was given:


<img src="Favorite Things FINAL jpg.jpg" usemap="#image-map">

<map name="image-map">
<area target="_blank" alt="Mom " title="Mom " href="https://red-dogfish-7pfk.squarespace.com/mom" coords="243,658,315,718" shape="rect">
<area target="_blank" alt="Emily Murphy" title="Emily Murphy" href="https://red-dogfish-7pfk.squarespace.com/emilymurphy" coords="483,740,348,655" shape="rect">
<area target="_blank" alt="Kayla" title="Kayla" href="https://red-dogfish-7pfk.squarespace.com/kayla" coords="356,773,507,852" shape="rect">
<area target="_blank" alt="Syd" title="Syd" href="https://red-dogfish-7pfk.squarespace.com/syd" coords="328,416,466,505" shape="rect">
<area target="_blank" alt="Oliver" title="Oliver" href="https://red-dogfish-7pfk.squarespace.com/oliver" coords="216,758,327,836" shape="rect">
<area target="_blank" alt="Honorable Mentions" title="Honorable Mentions" href="https://red-dogfish-7pfk.squarespace.com/honorable-mentions" coords="7,862,781,998" shape="rect">
<area target="_blank" alt="Matt" title="Matt" href="https://red-dogfish-7pfk.squarespace.com/matt" coords="580,768,520,668" shape="rect">
<area target="_blank" alt="Stan" title="Stan" href="https://red-dogfish-7pfk.squarespace.com/stantheman" coords="146,585,286,633" shape="rect">
<area target="_blank" alt="Derrick" title="Derrick" href="https://red-dogfish-7pfk.squarespace.com/derrick" coords="413,628,306,517" shape="rect">
<area target="_blank" alt="Julie " title="Julie " href="https://red-dogfish-7pfk.squarespace.com/julie" coords="503,615,419,515" shape="rect">
<area target="_blank" alt="Max" title="Max" href="https://red-dogfish-7pfk.squarespace.com/max" coords="486,301,330,203" shape="rect">
<area target="_blank" alt="Lewis " title="Lewis " href="https://red-dogfish-7pfk.squarespace.com/lewis" coords="548,399,512,360" shape="rect">
<area target="_blank" alt="Corey " title="Corey " href="https://red-dogfish-7pfk.squarespace.com/corey" coords="565,343,500,199" shape="rect">
<area target="_blank" alt="Luke" title="Luke" href="https://red-dogfish-7pfk.squarespace.com/luke" coords="181,300,235,369" shape="rect">
<area target="_blank" alt="Skiko " title="Skiko " href="https://red-dogfish-7pfk.squarespace.com/skiko" coords="236,300,291,370" shape="rect">
<area target="_blank" alt="Teague " title="Teague " href="https://red-dogfish-7pfk.squarespace.com/teague" coords="656,576,506,480" shape="rect">
<area target="_blank" alt="Nick " title="Nick " href="https://red-dogfish-7pfk.squarespace.com/nick" coords="286,569,140,493,142,490,146,494,123,555" shape="rect">
<area target="_blank" alt="Mitch " title="Mitch " href="https://red-dogfish-7pfk.squarespace.com/mitch" coords="628,663,509,589" shape="rect">
<area target="_blank" alt="Robby " title="Robby " href="https://red-dogfish-7pfk.squarespace.com/robby" coords="625,838,518,772" shape="rect">
<area target="_blank" alt="Eric " title="Eric " href="https://red-dogfish-7pfk.squarespace.com/eric" coords="487,185,335,145" shape="rect">
<area target="_blank" alt="Preston" title="Preston" href="https://red-dogfish-7pfk.squarespace.com/preston" coords="641,469,481,400" shape="rect">
<area target="_blank" alt="Kimmy" title="Kimmy" href="https://red-dogfish-7pfk.squarespace.com/kimmy" coords="382,398,312,305,184,396,305,471" shape="rect">
<area target="_blank" alt="Trist" title="Trist" href="https://red-dogfish-7pfk.squarespace.com/trist" coords="306,476,185,393,144,205,224,278" shape="rect">
<area target="_blank" alt="SidLo" title="SidLo" href="https://red-dogfish-7pfk.squarespace.com/sidlo" coords="247,294,136,200" shape="rect">
<area target="_blank" alt="Hayden" title="Hayden" href="https://red-dogfish-7pfk.squarespace.com/hayden" coords="326,294,248,206" shape="rect">
<area target="_blank" alt="Ludo" title="Ludo" href="https://red-dogfish-7pfk.squarespace.com/ludo" coords="572,311,631,346" shape="rect">
<area target="_blank" alt="Julie Mathewson" title="Julie Mathewson" href="https://red-dogfish-7pfk.squarespace.com/juliemathewson" coords="574,349,633,383" shape="rect">
<area target="_blank" alt="Drew" title="Drew" href="https://red-dogfish-7pfk.squarespace.com/drew" coords="234,749,152,646" shape="rect">
<area target="_blank" alt="Sean" title="Sean" href="https://red-dogfish-7pfk.squarespace.com/sean" coords="397,316,437,407,441,411,437,407" shape="rect">
<area target="_blank" alt="Scotty" title="Scotty" href="https://red-dogfish-7pfk.squarespace.com/scotty" coords="438,318,478,406" shape="rect">
</map>

Which pages are you referring to? /config is admin url

Trying to Creat an image map - not working

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

DNU

DNU

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources