• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

JPEG with HYPERLINKS

Community Beginner ,
May 07, 2018 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.

Views

9.5K

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
community guidelines

correct answers 1 Correct answer

Community Expert , May 08, 2018 May 08, 2018

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.

Votes

Translate

Translate
LEGEND ,
May 07, 2018 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>

Votes

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
community guidelines
Community Beginner ,
May 07, 2018 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>

Votes

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
community guidelines
Community Beginner ,
May 08, 2018 May 08, 2018

Copy link to clipboard

Copied

How do they do something like this:

Votes

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
community guidelines
Community Beginner ,
May 08, 2018 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.

Votes

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
community guidelines
Community Expert ,
May 08, 2018 May 08, 2018

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
May 07, 2018 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/

Votes

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
community guidelines
Community Expert ,
May 07, 2018 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.


Melissa Piccone | Adobe Trainer | Pluralsight Author | Fine Artist

Votes

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
community guidelines
Community Expert ,
May 07, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
May 07, 2018 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...


Melissa Piccone | Adobe Trainer | Pluralsight Author | Fine Artist

Votes

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
community guidelines
Community Expert ,
May 07, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
May 07, 2018 May 07, 2018

Copy link to clipboard

Copied

I'll check these out, thanks!


Melissa Piccone | Adobe Trainer | Pluralsight Author | Fine Artist

Votes

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
community guidelines
LEGEND ,
May 07, 2018 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.

Votes

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
community guidelines
Community Beginner ,
May 08, 2018 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.

Votes

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
community guidelines