Highlighted

JPEG with HYPERLINKS

Community Beginner ,
May 07, 2018

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

TOPICS
Learn Dreamweaver

Views

6.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

JPEG with HYPERLINKS

Community Beginner ,
May 07, 2018

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

TOPICS
Learn Dreamweaver

Views

6.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 07, 2018 1
LEGEND ,
May 07, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 2
Community Beginner ,
May 07, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 0
Community Beginner ,
May 08, 2018

Copy link to clipboard

Copied

How do they do something like this:

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2018 0
Community Beginner ,
May 08, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2018 1
Adobe Community Professional ,
May 08, 2018

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2018 0
Adobe Community Professional ,
May 07, 2018

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 2
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 2
Adobe Community Professional ,
May 07, 2018

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.  

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 1
Adobe Community Professional ,
May 07, 2018

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 0
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 0
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

I'll check these out, thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 0
LEGEND ,
May 07, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 1
Community Beginner ,
May 08, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2018 1