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?

[Anonymous]

Hi Amanda,

I read through this thread and thought it required an answer that brings everything together.

In the responsive design era what you are wanting to do has become more complicated than before. In the classic design era (4+ years ago ) you could use what are called image maps which is HTML that basically puts a grid on top of your image so the browser can be told there are certain hotspots on an image. Another option was to slice up the image and put it back together using tables so that you could isolate a piece of the image to put a link on.

Neither of those options work in responsive design though because your image scales and adjusts to the size of the browser window making it impossible to use those two techniques for obvious reasons. There are new solutions though, like using jQuery or SVG, but both require extensive coding experience.

Google has made it clear that your Web pages (landing pages) must be designed using responsive design techniques or your Web site will be left behind so if you need to do an image like map within Marketo you will have to be able to do the coding required to use jQuery or SVG. Email on the other hand is another matter. I think it is safe to use classic design techniques in email still, provided you use images sparingly and text on images sparingly. If our clients require us to use image maps we will use classic email design, however, even in that case you still have to be comfortable enough with coding to be able to create and insert the HTML into the email. Dreamweaver is the simplest way to create a map and you can add that code directly into the mktEditable locations in the email.

[Amanda_Thomas6]

Thank you, Trevor. It's good to get some background information and everything summarized.

[Stijn_Heijthuij]

Hi Amanda,

What you could try is to have your map be a Bulletproof background images | Campaign Monitor​.

Then you can add a table with widths and heights in such a way that it appears to be a map with names/links over it. When actually it's just a table over a background image.

[Amanda_Thomas6]

Thank you, Stijn!

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

[Amanda_Thomas6]

Thank you, Jennifer!

[Grégoire_Miche2]

HI Jennifer,

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

-Greg

[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?

[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

[John_Clark1]

Good find, Greg!

John

[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?

[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