Multiple HTML links for One Image

[Amanda_Thomas6]

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?

[Grégoire_Miche2]

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]

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]

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_]

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]

Good find, Greg!

John

[Amanda_Thomas6]

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 · Accepted solution]

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]

HI Jennifer,

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

-Greg

[Amanda_Thomas6]

Thank you, Jennifer!