Skip to main content
Participant
May 7, 2018
Answered

JPEG with HYPERLINKS

  • May 7, 2018
  • 5 replies
  • 10795 views

Hi all,

I am having trouble exporting a jpeg with hyperlinks in such a way that I can place the jpeg in an email body, so that it is clickable. We want to send a digital flyer with our social media links to our clients. Can you even do such a thing? I am a bit rusty with coding.

In anyone can give me advice, I'll appreciate it very much.

This topic has been closed for replies.
Correct answer Nancy OShea

The main problem with using an image map is what if images are blocked by the network or email client? They won't see anything.

I suggest you use a tested email template with plain text links for people who can't view images.  Also provide a link to the online website where your newsletter is hosted.

5 replies

Participant
May 8, 2018

While Using the image scr source code <img scr="Image source.jpg" /> will show the image, wrapping it in a url tag <a href=" destination url> Images source code </a> will make it clickable and redirects to the destination url.

Nancy OShea
Community Expert
Community Expert
May 7, 2018

Melissa is right.  JPG & PNG images cannot in and of themselves contain outbound links.  However SVG which is XML based can contain links.  But I don't recommend using  SVG in emails quite yet.

Remember too that HTML email is primarily a text based communication.   How it looks on the receiving end is mired in a sea of unknowns like which  e-mail clients people have and what their permission & network security settings allow.  The only safe & certain thing is plain text.   Images in emails are dicey at best.  You can use them for a sprinkling of visual interest but don't use them for anything important.  

Nancy O'Shea— Product User & Community Expert
melissapiccone
Community Expert
Community Expert
May 7, 2018

Nancy - I need to learn this - how do you put a link in SVG? Can you do it in Illustrator when you save it? I had no idea... I'm not using SVG yet, or teaching it because I don't think it's fully supported yet. Tell me more...

Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist
Nancy OShea
Community Expert
Community Expert
May 7, 2018

Adding links in Illustrator, no.  But you can define an XLink namespace within the XML code generated by Illustrator.

SVG Links - W3C Wiki

https://developer.mozilla.org/en-US/docs/Web/SVG

Nancy O'Shea— Product User & Community Expert
melissapiccone
Community Expert
Community Expert
May 7, 2018

Just to clarify, you can't actually make a jpg that contains links... you have to code them.

Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist
Jon Fritz
Community Expert
Community Expert
May 7, 2018

Osgood's answer will work, if your recipients have their email client set to download images automatically (most don't). Sending out an html email newsletter, especially to large numbers of recipients, has a fair number of "this will work, but..." and "this won't work, if..." situations.

Some helpful reading:  HTML E-Mail & Newsletter Blasts - https://alt-web.com/

Legend
May 7, 2018

Just wrap your image in an anchor tag <a href=""></a>:

<a href="http://www.social_media_link.html"> <img src="http://www.yourDomain.com/images/yourImage.jpg" alt="Social Media Link"> </a>

Participant
May 8, 2018

If my html now looks like this, where should I put the "social media link":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<img src="Digital Flyer FINAL APPROVE.jpg" width="1500" height="2135" usemap="#Map" border="0" />

<map name="Map" id="Map">

  <area shape="rect" coords="1385,2024,1456,2078" href="https://www.facebook.com/Pieldetoroafrica/" />

  <area shape="rect" coords="1310,2022,1381,2086" href="http://mediplusmz.com/esprit/#1519806057824-5afaf83f-d69e" />

  <area shape="rect" coords="1248,2020,1303,2088" href="http://mediplusmz.com/esprit/#1519806057824-5afaf83f-d69e" />

  <area shape="rect" coords="1168,2020,1241,2084" href="https://www.facebook.com/DanceSpotMz/" />

  <area shape="rect" coords="1095,2039,1166,2065" href="https://www.facebook.com/Cheetah-Express-TOURS-1866067953406937/" />

  <area shape="rect" coords="1021,2037,1093,2065" href="http://www.nelspruitoptometrist.co.za/" />

  <area shape="rect" coords="1314,1964,1383,2002" href="#" />

  <area shape="rect" coords="1243,1966,1312,1998" href="https://mozcomputers.com/" />

  <area shape="rect" coords="1168,1968,1241,2000" href="http://progym.co.mz/" />

  <area shape="rect" coords="1104,1955,1160,2020" href="https://www.facebook.com/ceramicpromozambique/" />

  <area shape="rect" coords="1016,1959,1095,2015" href="http://mediplusmz.com/" />

  <area shape="rect" coords="1389,1966,1456,2002" href="https://www.europcar.co.mz/en/pages/rental-office-locations" />

  <area shape="rect" coords="1087,1882,1395,1953" href="http://mediplusmz.com/esprit/#1519806057824-5afaf83f-d69e" />

  <area shape="rect" coords="16,158,652,472" href="http://mediplusmz.com/esprit/" />

  <area shape="rect" coords="71,1179,566,1357" href="http://progym.co.mz/" />

  <area shape="rect" coords="110,691,521,816" href="http://mediplusmz.com/wp-content/uploads/2018/02/Esprit-Application-Form.pdf" />

  <area shape="rect" coords="31,822,613,951" href="http://mediplusmz.com/esprit/#1519806057824-5afaf83f-d69e" />

  <area shape="rect" coords="735,936,1001,1071" href="http://mediplusmz.com/our-products/#plus1" />

  <area shape="rect" coords="751,1080,990,1226" href="http://mediplusmz.com/our-products/#plus3" />

  <area shape="rect" coords="1110,929,1380,1065" href="http://mediplusmz.com/our-products/#plus2" />

  <area shape="rect" coords="1106,1080,1372,1207" href="#" />

  <area shape="rect" coords="420,1632,731,1781" href="http://mediplusmz.com/esprit/" />

  <area shape="rect" coords="16,476,660,573" href="http://mediplusmz.com/" />

  <area shape="rect" coords="751,1633,1072,1794" href="http://mediplusmz.com/want-to-join/" />

  <area shape="rect" coords="500,1964,596,2041" href="https://plus.google.com/u/0/116972589752691623652" />

  <area shape="rect" coords="611,1966,688,2041" href="http://mediplusmz.com/" />

  <area shape="rect" coords="705,1963,776,2039" href="https://www.facebook.com/MediplusSA/" />

  <area shape="rect" coords="810,1966,875,2041" href="https://www.linkedin.com/company/mediplus-mz/" />

  <area shape="rect" coords="901,1966,978,2045" href="https://twitter.com/MediplusLda" />

</map>

</body>

</html>

Participant
May 8, 2018

How do they do something like this: