Image with links | Yola Customer Community

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. Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1315904/RackMultipart20151123-7628-11p5ksg-banner_345_inline.jpg?1448238999

Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1315904/RackMultipart20151123-7628-11p5ksg-banner_345_inline.jpg?1448238999

Peter Sauer

150 Posts
65 Reply Likes

Posted 4 years ago

4 years ago

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 :)

1 person likes this

4 years ago

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)

4 years ago

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

4 years ago

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)

4 years ago

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