Copy link to clipboard
Copied
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.
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
How do they do something like this:
Copy link to clipboard
Copied
Thats html coding. There are html codes to do that, a programmer can help with it OR you just simply use some already done for you plugins/email messaging service, where all you have to do is fill in the blank spaces.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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/
Copy link to clipboard
Copied
Just to clarify, you can't actually make a jpg that contains links... you have to code them.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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...
Copy link to clipboard
Copied
Adding links in Illustrator, no. But you can define an XLink namespace within the XML code generated by Illustrator.
https://developer.mozilla.org/en-US/docs/Web/SVG
Copy link to clipboard
Copied
I'll check these out, thanks!
Copy link to clipboard
Copied
melissapiccone wrote
I'm not using SVG yet, or teaching it because I don't think it's fully supported yet. Tell me more...
SVG 1 has been fully supported in all browsers since IE9 was released, with other browsers and mobile devices having support from day 1.
The one item you must be carefull of though when using SVG is SMIL support, (svg animation effects) as IE/Edge does not have support. The reason for that is because SMIL was to have been depreciated in SVG 2, but has since been 're-introduced' until css animations are completely intergrated with features that SMIL previously supplied for SVG. All modern browsers do support css transforms/transitions and animations for use with svg.
SVG 2, is currently only partially implemented.
Copy link to clipboard
Copied
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.