How to implement image mapping with CSS

1. Introduction

Image maps allow you to designate areas of an image as hotspots. When you move the mouse over this area, some content information will be displayed. Of course, we can also click on this area to jump and implement a function similar to image navigation.

I found a picture like the one above on the Internet and want to achieve the following function: when the mouse hovers over each person, I hope a rectangular box will appear, and after clicking it, I can jump to the corresponding website.

The effect is as follows:

2. Code Implementation

1. The first thing you need to do is add the image to the page, placing it in a named div:

<div class="imagemap">
  <img width="500" height="350" src="test.jpg">
</div>

2. Then, add a list of each person’s website link after the image. Each list item needs to be assigned a class in order to identify the person in the list item . You can also give each link a title attribute that contains the person's name. This will display the person's name in a tooltip that appears on most browsers when you hover over the link.

<div class="imagemap">
  <img width="500" height="350" src="test.jpg">
  <ul>
    <li class="baidu">
      <a href="https://www.baidu.com" target="_blank">
        <span class="note">Baidu</span>
      </a>
    </li>
    <li class="tengxun">
      <a href="https://www.qq.com" target="_blank">
        <span class="note">Tencent</span>
      </a>
    </li>
    <li class="xinlang">
      <a href="https://www.sina.com.cn" target="_blank">
        <span class="note">Sina</span>
      </a>
    </li>
    <li class="taobao">
      <a href="https://www.taobao.com" target="_blank">
        <span class="note">Taobao</span>
      </a>
    </li>
    <li class="jd">
      <a href="https://www.jd.com" target="_blank">
        <span class="note">Jingdong</span>
      </a>
    </li>
  </ul>
</div>

I want to customize the content style displayed when the mouse hovers. I don't use the title attribute, so I add a span to the a tag.

3. Set the width and height of the outer div to keep it consistent with the size of the image . Then, set the div's position property to relative, because this will allow the contained link to be absolutely positioned relative to the edges of the div (that is, the image).

I don’t want the black dots of the list to appear on the page, and I also want to remove the inner and outer margins of the list items.

.imagemap {
  width: 500px;
  height: 350px;
  position: relative;
}

.imagemap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

4. The next thing is to apply styles to the links. Absolutely position the links (because we have set the position attribute to relative on the outer div, so the positioning here is relative to the div, and the width and height of the div and the image are the same, which is equivalent to positioning from the upper left corner of the image), and position them to the corresponding people to form hotspots. However, first you need to set their width and height to create the required click area.

.imagemap a {
  position: absolute;
  /*Convert to a block-level element so that it can form an area*/
  display: block;
  width: 50px;
  height: 60px;
  text-decoration: none;
}

.imagemap .baidu a {
  top: 70px;
  left: 65px;
}

.imagemap .tengxun a {
  top: 85px;
  left: 150px;
}

.imagemap .xinlang a {
  top: 70px;
  left: 230px;
}

.imagemap .taobao a {
  top: 70px;
  left: 305px;
}

.imagemap .jd a {
  top: 70px;
  left: 365px;
}

/*When the mouse moves over, a box will appear*/
.imagemap a:hover {
  border: 1px solid white;
}

5. Next, we need to set the style of the text content displayed when the mouse moves over it. We want it to appear above the character, have a background color and padding, and have the text centered:

.imagemap a .note {
  position: absolute;
  top: -2em;
  left: -100em;
  background-color: #42b983;
  color: white;
  width: 2em;
  text-align: center;
  padding: 0.2em 0.5em;
  border-radius: 5px;
}

.imagemap a:hover .note {
  left: 0;
}

Notice:

• When the position property is set to absolute, the element is moved out of the normal document flow and the element position is determined by specifying the offset of the element relative to the nearest non-static positioned ancestor element. Because we have absolutely positioned the link a tag in the list, the span in the a tag is positioned relative to the link a.
• Here, setting top to a negative value moves the element upward a certain distance, and the left value is -100em, so that the span is not within the visible area at the beginning. Then when the mouse passes by, reset the value of left to the correct position.

In addition, under normal circumstances, it is useless to set the width and height of inline elements. However, in the above code, we can successfully set the width of span because the span is absolutely positioned here. The width and height of inline elements after absolute positioning can be set.

Knowledge point: Several methods to set the width and height of inline elements

3 ways to set width and height of inline elements

• Use display: display:block / inline-block
• Use position: position:absolute / fixed
• Use float: float:left / right

6. No, you can test it. Now a simple image mapping has been implemented.

This is the end of this article about implementing image mapping with CSS. For more information about implementing image mapping with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!