Question 215915 in Html Question posted in
Some basic documentation can be found here.

Html – How do I create a popup text instead of href link when using an image map?

I am trying to create an image map and it works okay. I am able to hover over an image area and it links to another page.

Instead of href link, is it possible to display popup text instead? So, in my example below, clicking on the left eye or Mouth should produce popup text.

Here is an example of how my popup text should look.
https://frankmanno.com/ideas/css-imagemap/index_js.html

Here is my code –

<div id="container">
<div id="image_container">
    <img src="http://tinypic.com/images/goodbye.jpg" usemap="#image_map">
<map name="image_map">
  <area alt="Left Eye" title="Left Eye" href="https://www.yahoo.com/" coords="118,36,148,80" shape="rect">
  <area alt="Mouth" title="Mouth" href="https://www.yahoo.com/" coords="121,84,198,118" shape="rect">
</map>
</div>
Tags:

2

Answers


  1. 0

    You have to change href attribute to title in the area tag.
    After applying this change, when you hover over this area, the popup text contained in the title attribute will be displayed.
    If you need a more advanced effect, you’ll have to use JS to display similar cases.

    <div id="container">
    <div id="image_container">
        <img src="http://tinypic.com/images/goodbye.jpg" usemap="#image_map">
        <map name="image_map">
            <area alt="Left Eye" title="Left Eye" coords="118,36,148,80" shape="rect">
            <area alt="Mouth" title="Mouth" coords="121,84,198,118" shape="rect">
        </map>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    To add a beautiful popup with X close button, as you mentioned, you need to add it separately, for example as a div element and place it in correct position. Then hide it with display: none or visibility: hidden initially. And add a mouseenter event listener (element.setEventListener("onmouseenter", () => ...)) to your area element, and update style of your popup to make it visible.

    Additionally, you may want to hide the popup, and to achieve that, you’ll need a mouseleave event listener, which will apply the hidden styles to your popup once again.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search