SOLVED

Multiple HTML links for One Image

Go to solution
Amanda_Thomas6
Level 9

Multiple HTML links for One Image

I am looking to add multiple HTML links to one picture in targeted areas. An alternative to this is to be able to layer images in one email. I haven't been able to find how to layer images.

My Use Case: Click on the computer and it takes you to the video's landing page, click on the person it takes you to our demo request webpage, etc.

Has anyone tried this before?

1 ACCEPTED SOLUTION

Accepted Solutions
Jenn_DiMaria2
Level 10

Re: Multiple HTML links for One Image

Agree that this can be done with image maps on webpages, but wouldn't recommend in email. If it's important to do so, I would slice up the image in Photoshop and export as HTML, linking each image separately and making sure it renders properly in all email clients.

If you go this route, remember that each image should have include a style="margin:0" in the code to prevent padding from blowing up the tables produced by Photoshop.

View solution in original post

13 REPLIES 13
Grégoire_Miche2
Level 10

Re: Multiple HTML links for One Image

Hi Amanda,

I do not think this is feasible as such in HTML with just 1 image. Either you cut you image in parts and each part will have it's own URL or you use more sophisticated techniques, such as a background image with some transparent images on top of it covering the various parts of the background one. The URL would be set on the transparent images.

I would not encourage you do too much of these things in emails, though, as the rendering in email clients might be inconsistent. If you do it in email, test it thoroughly.

-Greg

John_Clark1
Level 10

Re: Multiple HTML links for One Image

Hi Amanda,

This is technically possible, and I've seen it on websites before.  I don't see any reason it shouldn't work in an email, but I'm not a designer.

The technique is called image mapping, and you can learn more about it below.  You could also engage a developer or services@marketo.com for help.

HTML map tag

John

Grégoire_Miche2
Level 10

Re: Multiple HTML links for One Image

Hi John Clark​,

You are right, apparently, <map> tags are supported in most of email clients, yet not in Gmail. The hard point is that they do not work at all if images are disabled (default setting for many clients). So it's not recommended, says the article here : Do image maps work in HTML email?

-Greg

Dan_Stevens_
Level 10 - Champion Alumni

Re: Multiple HTML links for One Image

I too would caution the use of image maps in emails.  And does Marketo even apply tracking code to those links within the image map?

John_Clark1
Level 10

Re: Multiple HTML links for One Image

Good find, Greg!

John

Amanda_Thomas6
Level 9

Re: Multiple HTML links for One Image

Very good information. Thank You John,Dan, and Greg! How do you layer pictures in Marketo? Are you able to do this in the default edit box? Or, do you have to enter html?

Jenn_DiMaria2
Level 10

Re: Multiple HTML links for One Image

Agree that this can be done with image maps on webpages, but wouldn't recommend in email. If it's important to do so, I would slice up the image in Photoshop and export as HTML, linking each image separately and making sure it renders properly in all email clients.

If you go this route, remember that each image should have include a style="margin:0" in the code to prevent padding from blowing up the tables produced by Photoshop.

Grégoire_Miche2
Level 10

Re: Multiple HTML links for One Image

HI Jennifer,

style="margin:0; padding:0;" is even better

-Greg

Amanda_Thomas6
Level 9

Re: Multiple HTML links for One Image

Thank you, Jennifer!