Participant

Answered

JPEG with HYPERLINKS

Forum|Forum|7 years ago
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.

Participant

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.

Community Expert

Community Expert

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

Community Expert

Community Expert

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

Community Expert

Community Expert

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

Community Expert

Community Expert

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

Community Expert

Community Expert

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

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>

MoniqueDeKok7Author

Participant

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>

MoniqueDeKok7Author

Participant

How do they do something like this: