Popup from within an -tag

Question

First things first: I am an absolute novice to javascript but have the feeling I have to learn it. Here's my problem:

I have a custom map made from a photo with defined map areas.
I want to show a popup window with additional information AND a picture (like Google Maps). My guess is that I need javascript to do this. So far, I searched the web up and down but only found snippets that let the user hit a button to show the popup. Here's the html-code I have so far:















West Pasco Model Railroad Association

I assume that I have to reference the "href" attribute somehow but have to clue how to do this. Did anybody do this already and can help me out, please?

user_5217142 · Answer

To get you started, here's a way to respond to a click event over an area element in the image map:

function popupModal(event) {
   event.preventDefault();  // assuming no link action to be taken
   const area = event.target;
   const windowName = area.target;
   const href = area.getAttribute("href");

   // create (modal?) pop up

   // insert code to use area, href and/or windowName values here
   console.log('windowName: "%s", href: "%s"', windowName, href, area);
   //...
}

// add click event listener

document.querySelector("map").addEventListener("click", popupModal);

Note the code to add the event listener must be placed (or included from file with script tags) at the foot of the body section, after HTML to create the map element has been parsed by the browser, or called in an event listener for DOMContentLoaded or window load events. Otherwise it won't find the MAP element.

The href attribute value obtained from the area element only contains the text specified in HTML source - so you might get, say, "#imperialfoods" and not the complete http://example.com/folder/page.html#imperialfoods link reference which may be more than needed.

I don't know if you intend using featherlight or jQuery in your code - the above example is vanilla JavaScript.

If you have further questions about creating a modal popup please ask a new question and include the code you've written that attempts to create one - multiple questions on multiple topics in one post may prevent future readers finding solutions for only one of them.

Popup from within an <area>-tag

1 Answers