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

Question

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>

I assume you want a tooltip. Here is an example implemetation of this: https://www.w3schools.com/css/css_tooltip.asp — Taige Wang, Jul 25 '23 at 21:26

Dmitrii Goriachev · Accepted Answer · 2023-07-25T22:18:00.953

1

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.

edited Jul 25 '23 at 22:18

answered Jul 25 '23 at 22:17

Dmitrii Goriachev

46
4

Thankyou so much. Is it possible for you to update my example? I am new to Javascript, so example will help. Thanks for your time. – newuser Jul 25 '23 at 22:38
Take a look at these examples. The only thing you need to change is replace onclick event to mouseenter, apply event handlers to your areas and change styles of the popup to position it near your area, using position: absolute for example. Keep going, you will surely succeed! https://www.w3schools.com/howto/howto_css_modals.asp - https://www.w3schools.com/howto/howto_js_popup.asp – Dmitrii Goriachev Jul 26 '23 at 14:33
Thankyou. I was able to make it work. Now I just need the textbox next to the image. Please see my new post here - https://stackoverflow.com/questions/76772483/how-to-display-popup-box-next-to-image-in-a-image-map Thank you very much. – newuser Jul 26 '23 at 14:45

score 0 · Answer 2 · answered Jul 25 '23 at 21:31

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>

Thankyou, do you have an example with advanced options that I can look at? I want something that also has close 'X' to close the popup. — newuser, Jul 25 '23 at 21:39

score 0 · Answer 3 · answered Jul 26 '23 at 00:28

What has helped me is the W3Schools pages. Since links change, see their "image map" lesson on the HTML5 course. I found using < ... onclick="alert('text here');"> has worked for me, and it was an adaptation of one of their examples (since, with this being my first answer, I hesitate to place, as I'm unsure if that would be plagiarism), except that instead of <... href="stuff.htm"> like they did, I used an alert. This is similar to your goal, though admittedly slightly different. Hope that helps!

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

3 Answers3