Multiple HTML links for One Image

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.

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.

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?

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

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