HTML Tags for Infographic-like site

Hello! I won't frame this as a Divi question, but I suppose it bears mentioning that I work with Divi and Upfront for most of my work.

I am trying to design a website to look like a comic book. Here is darn near a perfect example of what I want it to look like:

https://www.templatemonster.com/infographics/black-web-design-interactive-comic.php

The problem is, I want to embed the hyperlinks, and I don't know a way to do this aside from the process at W3schools (for HTML area Tags), which I am rather unfamiliar with. Additionally, I am worried that this won't transfer well over to mobile. Here is that reference:

https://www.w3schools.com/tags/tag_area.asp

So here's my question. Is there a better way to go about this, such as creating an infographic at Pictochart (or comparable website) and inserting hyperlink areas (I assume you can do this) and then uploading that as some sort of smart image, or should I just muscle it through? Is there perhaps an easier way to do this in Divi or Upfront? Or is there a common-practice that I am just not aware of?

Note, that many of my hyperlinks will be diagonal, or possibly oddly sized. I had considered creating something similar to the first link I had provided, but I didn't want an obscene loading time.

Thanks in advance!

  • Predrag Dubajic

    Hey Fox Wilde,

    Hope you're doing well today :slight_smile:

    I'm afraid that I'm not familiar with a tool that could do this for you out of the box. :slight_frown:

    Upfront does come with Code element which you can add to your page and then create this based on the w3schools example.

    I myself didn't had a chance to work with something like this before but it looks pretty straight forward, here's how it works:

    <img src="YOUR_IMAGE_URL" width="145" height="126" alt="Planets"
    usemap="#planetmap">
    
    <map name="planetmap">
      <area shape="rect" coords="DISTANCE_FROM_LEFT,DISTANCE_FROM_TOP,DISTANCE_FROM_RIGHT,DISTANCE_FROM_BOTTOM" href="YOUR_URL" alt="Sun">
    </map>

    Basically you add your desired image and then map areas there, shape can be rect(angle) or circle and then coords (coordinates) you configure where the link will be on that image, each value is number of pixels that will be between link area and image borders.

    I'm not familiar with piktochart so perhaps it would be best getting in touch with them directly and see if something like this can be done via their service.

    Best regards,
    Predrag