Hotspots on a Background image?

  • I have set the image as the background, but if there is another way to do this, I’m open to it.

    I need the booths to have a info bubble that pops up when someone hoovers over them. It will contain info and a link to another page if the interest is there after reading over the info.

    If I use GIMP and map the image, its too small and doesn’t fill the page AND can’t make the bubble popups only links.
    If I use Image Hotspot by Devvn, again too small and need more than a pin size area.

    Is there another way to end with the same result?

    • This topic was modified 4 years, 5 months ago by mrswwonka.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    You cannot image map a background. You need to have a usemap element attribute telling the browser which map element to use. Backgrounds cannot have element attributes assigned.

    Getting an img element to be an appropriate size is normally a matter of applying the right CSS. They typically have their width property set to 100% so they always fill their container. The container is then sized to work with the page layout. This way images behave responsively to various display sizes.

    This gets more complicated with image maps because they must be defined in absolute pixel dimensions and there must be a 1 to 1 relation to the image it’s mapped to. To have image hot spots on an image that behaves responsively, the map needs to be recalculated to scale along with the image. A script that does this for you is available on GitHub.

Viewing 1 replies (of 1 total)
  • The topic ‘Hotspots on a Background image?’ is closed to new replies.