javascript - add overlay in specific position in HTML map

Question

Welcome To Ask or Share your Answers For Others

javascript - add overlay in specific position in HTML map

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - add overlay in specific position in HTML map

I have a static image made interactive using the concept of HTML maps.

Coordinates of the image set by uploading on https://imagemap.org/

Expected Behavior:

An overlay should display on hover in its respective box. For example, when the mouse hovers over red box, the overlay text should come in the red box itself, if it hovers on green then in green and so on.

Current Behavior:

The overlay text position is not coming in its respective box. It is displayed at the bottom. To achieve this, I am thinking of appending the div that contains the text right after the respective area tag when it is clicked.

My code:

<body>
  <div class="interactive-map" >
  <img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
  <div class="card" style="width:40%; height: 10%;">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>
  <map name="image_map">
  <area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
  <area title="Green" coords="132,30,194,67" shape="rect">
  <area title="Blue" coords="22,147,74,192" shape="rect">
  <area title="Yellow" coords="131,144,197,188" shape="rect">
</map>

</div>

</body>

area{
    cursor: pointer;
    
}

$('area').hover(function(){
    ????
})

Fiddle- https://jsfiddle.net/woke_mushroom/2u3kbnv9/14/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T20:04:45+0000

I think easiest way to show content inside a certain "area" is to make it a child-element of that area. You can use any block-element (e.g. <div></div>) as area. You will be be way more flexible this way as with using image maps.

Also showing contents when hovering can be achieved without any javascript with the :hover css pseudo class.

Below I positioned some boxes with css flex and hide/show the contents with css. You might want to position them in a css grid or some other way (like absolutely positioned in front of an image).

.container {
    display: flex;
    flex-wrap: wrap;
    width: 30em;
}

.area {
    cursor: pointer;
    width: 15em;
    height: 15em;
    border: 2px solid black;
    box-sizing: border-box;
}

.area > span {
    opacity: 0;
}

.area:hover > span {
    opacity: 1;
}

#area-red {
  background-color: red;
}
#area-green {
  background-color: green;
}
#area-blue {
  background-color: blue;
}
#area-yellow {
  background-color: yellow;
}

<div class="container">
    <div id="area-red" class="area">
        <span>Red contents</span>
    </div>
    <div id="area-green" class="area">
        <span>Green contents</span>
    </div>
    <div id="area-blue" class="area">
        <span>Blue contents</span>
    </div>
    <div id="area-yellow" class="area">
        <span>Yellow contents</span>
    </div>
</div>

Categories

javascript - add overlay in specific position in HTML map

javascript - add overlay in specific position in HTML map

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags