Image with links

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have created an image with several pictures on it (as shown) and have use Photo shop to create slices with url links. each one of the images has a link sliced into it.
Does anyone know how I save this image with the links intact so I can download it to a sitebulder picture widget.
I have saved the image an an html with images and also images only but the images only when uploaded to yola the links are not active.
I am sure I am missing something simple but have spent the last 5 hours pulling out my hair.
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes

Posted 3 years ago

  • 1
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Peter,

It's not going to be possible to use the Picture Widget for this! I'd like to suggest doing it with an Image Map. I have created one for you using the above image. Drop the following code into an HTML Widget where you would like the image to appear:

<img src="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1315904/RackMultipart20151123-7628-11p5ksg-banner_34...; alt="" usemap="#Map1" />
<map name="Map1">
    <area alt="Warm Buddy" title="Warm Buddy" href="url1" shape="poly" coords="4,5,103,6,106,92,5,94" />
    <area alt="Heat Packs" title="Heat Packs" href="url2" shape="poly" coords="112,5,204,8,204,90,113,93" />
    <area alt="Animals" title="Animals" href="url3" shape="poly" coords="213,7,311,7,313,89,214,91" />
    <area alt="Baby Gifts" title="Baby Gifts" href="url4" shape="poly" coords="318,9,407,6,405,89,322,89" />
    <area alt="Accessories" title="Accessories" href="url5" shape="poly" coords="414,8,486,7,487,92,413,89" />
</map>

I used the following Image Map generator: http://imagemap-generator.dariodomi.de/

Let me know how it goes :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
P.S. Your image URL didn't post above so I replaced it with "resources/your image.jpg" - you'll need to add the correct link.

P.P.S. Ok, that didn't work but you know what I mean ;)
(Edited)
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Thanks so much.This would have saved me hours of heart ache yesterday.lol
One problem this is not responsive in mobile view any suggestions.
http://www.wildflowersaromatherapy.com/warm-buddy.php
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Off the top of my head Peter, make the width 100% and place it in a Column Divider Widget (container) so you can adjust it's size afterwards by dragging the center divider. Like so:

<img src="your image.jpg" alt="" usemap="#Map1" style="width:auto;" />

I'm hoping this won't mess up the coordinates? Let me know how it goes.
(Edited)
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Thanks Boomer
tried that and it did not take. have emailed Dario at image map for suggestions.
Thanks
 for all your help..invaluable
Peter