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">
</map>

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.

https://white-fog-8120.bss.design/

Raj

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:
https://responsive-image-map.bss.design/