Really new user trying to make image areas links

I am brand new to the software as well as the forum so I hope I’m in the right place. I am experimenting with making a large (about 900 x 600) header image that will have areas of it go to different links. I found this: Layer over Image and stack flow - #2 by saj but it’s a bit older, and I can’t find what the heck “jumbotron” is. The idea is for a site I’m designing for my son, and he wants to be different, and mot have a normal menu. The image with have something like four or five different small areas that will be the links. The finished product will need to be adaptive as well. I can probably do it all by hand just using a text editor, but I really would like to see what I can do with the new software, so my wife doesn’t think I wasted the money. Thanks you

There is some info here:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

Hope that helps :+1:

I saw that when I was searching around, but I thought the web was moving away from image mapping to make adaptive designs work better. I thought transparent DIV were better to use now.
I also am still trying to get used to the Bootstrap Studio way of editing the code. It’s a bit frustrating trying to figure out how to make a DIV wrap around a link. The help videos make it look so simple.

Create a div with your image as a background.
Drop a link into that div
drop another div into the link
Size and move the div to the click location using margins.

I have highlighted the click area but you can remove that.


There is no problem using image maps, you just need to make sure that they are responsive.

You can do this using the javascript posted here by kuligaposten :

Example here: