Understanding Background Image Map Creation Procedures

This is my first time to ask a question.

Currently, I inserted the background image using the template omikuji.

<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<meta http-equiv="Content-Security-Policy" content="default-src*data:;style-src*'unsafe-inline';script-src*'unsafe-inline'"unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
</head>

<style>
    body{
        background-image:url("images/TOP_BK.jpg");
        background-size:cover;
        background-repeat —No-repeat;
        margin:0;
        padding:0;
        text-align:center;

    }

</style>
</head>
</html>

I'd like to create an image map on this background image. Please tell me where to insert the code below.

<body>
<map name="TOP_BK">
<area shape="rect" codes="417,299,626,619" href="BP">
<area shape="rect" codes="13,299,224,619" href="BS">
<area shape="rect" codes="117,547,317,867" href="BJ">
<area shape="rect" codes="324,547,524,867" href="BH">
<area shape="rect" codes="324,51,524,371" href="BA">
<area shape="rect" codes="120,51,320,371" href="BC">
</map>

<img src="TOP_BK.jpg" usemap="#TOP_BK">

*By the way, there is a hexagonal illustration in the background image, and I would like to go to a different page by tapping inside the hexagon.

monaca

2022-09-30 15:46

1 Answers

An image map is a link to a part of an image (shown by an img tag).I can't use it for background images.

There are two solutions.

1. Display the image with an img tag instead of the background image (background-image:url("images/TOP_BK.jpg") and attach an image map to it.

<body>
  <img src="TOP_BK.jpg" usemap="#TOP_BK">

 <map name="TOP_BK">
   <area shape="rect" codes="417,299,626,619" href="BP">
   <area shape="rect" codes="13,299,224,619" href="BS">
   <area shape="rect" codes="117,547,317,867" href="BJ">
   <area shape="rect" codes="324,547,524,867" href="BH">
   <area shape="rect" codes="324,51,524,371" href="BA">
   <area shape="rect" codes="120,51,320,371" href="BC">
 </map>

2. Leave the background image as it is, display the transparent rectangular image with an img tag, and attach an image map to it.

HTML is similar to the example above, except that the image used is a transparent rectangle.
The positional relationship between the background image and the transparent rectangle varies depending on the browser, so if you want to display it in multiple browsers, you need to use a modified map exclusively for each browser.
　Only consider changing the background image if you are not allowed.

2022-09-30 15:46

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656