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

New Member

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?Clickable area header image screenshot annotated.pngProline header image - w/links

Reply
0 Upvotes
3 Replies 3
Highlighted
Community Manager
Community Manager

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

Reply
0 Upvotes
Regular Contributor | Silver Partner

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

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

 

Reply
0 Upvotes
Regular Contributor | Silver Partner
<!-- 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 #