CMS Development

endlessventures
Member

[Will pay] Need the make areas of header image clickable/linkable to internal pages

Hey gang - 

 

I need to make four regions/areas of the header image clickable/linkable to internal pages. Does anyone know how to do this?Proline header image - w/linksProline header image - w/links

0 Upvotes
4 Replies 4
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

[Will pay] Need the make areas of header image clickable/linkable to internal pages

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://cdn2.hubspot.net/hub/469369/file-2274884416.png?t=1539372771517" usemap="#image-map">

<map name="image-map">
    <area target="_self" alt="" title="" href="#" coords="5,10,248,358" shape="rect">
    <area target="_self" alt="" title="" href="#" coords="513,355,266,70" shape="rect">
    <area target="_self" alt="" title="" href="#" coords="717,354,524,75" shape="rect">
    <area target="_self" alt="" title="" href="#" coords="955,363,736,10" shape="rect">
</map>

Created here: https://www.image-map.net/

 

You have to put in the links where it has #

WSprague
Member

[Will pay] Need the make areas of header image clickable/linkable to internal pages

So once you have the code, how do you imbed this into your marketing email?

0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

[Will pay] Need the make areas of header image clickable/linkable to internal pages

You can try using this link: upload your image and it will help you generate the code: 

 https://www.image-map.net/

 

0 Upvotes
Ty
HubSpot Employee
HubSpot Employee

[Will pay] Need the make areas of header image clickable/linkable to internal pages

Hi there @endlessventures,

 

This can be done with a little custom html/css wrapping and some containers, here is a quick/dirty mockup that shows each seperate linkable box.


While this does work as expected, it's probably not the best solution for mobile users. The boxes will scale with the picture, but since each slot is 25% wide, those clickable areas are going to get harder to click on smaller devices. 

 

I think a solution you should look into is, splitting your image up into 4 quadrants, so when it scales down, they will stack. Example: 

Screen Shot 2018-10-12 at 12.17.10 PM.png

 

This option could be done by simply stacking your images into a single container and letting your browser and some css handle how it scales down.

 

Let me know if you have any other questions, happy to help!

-- Ty

0 Upvotes