从 <area> 标记内弹出

Question

首先要做的事情：我是 javascript 的绝对新手，但我觉得我必须学习它。这是我的问题：

1. 我有一张自定义地图，由一张带有定义地图区域的照片制成。

2. 我想显示一个带有附加信息和图片的弹出窗口（例如 Google 地图）。 我的猜测是我需要javascript来做到这一点。到目前为止，我在网上上下搜索，但只找到了让用户点击按钮来显示弹出窗口的 sn-ps。 这是我到目前为止的 html 代码：

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/basic.css">
<link rel="stylesheet" href="../css/karten.css">
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>

<title>West Pasco Model Railroad Association</title>

<div class="container">

    <div class="header">

        <a href="index.html"><img class="img-full" src="../graphics/header-pic.jpg" alt="WPMRA Header Image" ></a>

    </div>
    <div id="map">
        <img src="refinery-fells-point-96dp-clean.gif" usemap="#fellspoint">
        <map name="fellspoint">
            <area shape="poly" coords="209,352,483,367,522,357,581,347,619,330,641,324,633,279,344,283" 
               id="refinery" alt="Refinery" href="#refinery" title="West Side Refinery, 2 Tracks, 10 cars"
            />
            <area shape="poly" coords="892,209,938,212,990,210,1028,185,1043,170,1041,143,1026,127,945,161,900,191,897,203" 
                alt="Scrapyard" target="scrap-yard" href="#scrapyard" 
            />
            <area shape="poly" coords="1091,267,1185,273,1188,242,1177,201,1088,201,1085,244" 
                alt="Brewery" target="eagles-nest-brewery" href="#eaglesnest-brewery" title="Eagles Nest Brewery, 2 tracks, 4 cars"
            />
            <area shape="poly" coords="1075,319,1118,386,1179,354,1134,282" 
                alt="Ralphs Classic Autoparts" target="classicautoparts"  href="#classicautoparts" 
            />
            <area shape="poly" coords="1020,371,1090,342,1056,284,988,312" 
                alt="The News Post and Sunday Gazette" target="news-post"  href="#news-post" 
            />
            <area shape="poly" coords="938,361,995,329,968,286,920,323" 
                alt="Reliable Warehouse and Storage" target="reliablewarehouse" href="#reliable-warehouse-and-storage" 
            />
            <area shape="poly" coords="873,358,919,317,907,285,852,329" 
                alt="Swift" target="swift" href="#swift" 
            />
            <area shape="rect" coords="1005,385,1079,439" 
                alt="Muir Beaver Express" target="beaverexpress" href="#beaverexpress" 
            />
            <area shape="rect" coords="813,377,983,430" 
                alt="IGA" target="iga" href="#iga" 
            />
            <area shape="poly" coords="1073,167,1163,143,1150,119,1059,87,967,113,994,132,1064,119" 
                alt="West Side Fuel and Oil" target="westsidefuelandoil" href="#westsidefuelandoil" 
            />
            <area shape="poly" coords="808,348,868,309,846,265,770,313" 
                alt="Imperial Foods" target="imperialfoods" href="#imperialfoods" 
            />

        </map>
       
    </div>
    
</div>

我假设我必须以某种方式引用“href”属性，但必须知道如何执行此操作。有没有人已经这样做了，可以帮助我吗？

Answer 1

为了帮助您入门，下面是一种响应图像映射中area 元素上的点击事件的方法：

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);

请注意，添加事件侦听器的代码必须放在（或包含在带有脚本标签的文件中）在正文部分的底部，在用于创建地图元素的 HTML 已被浏览器解析或在事件中调用之后DOMContentLoaded 或 window load 事件的侦听器。否则它将找不到 MAP 元素。

从area 元素获得的href 属性值仅包含在 HTML 源代码中指定的文本 - 因此您可能会得到“#imperialfoods”而不是完整的 http://example.com/folder/page.html#imperialfoods 链接引用，它可能超过需要。

我不知道您是否打算在代码中使用featherlight 或jQuery - 上面的示例是vanilla JavaScript。

如果您对创建模态弹出窗口还有其他问题，请提出一个新问题并包含您编写的尝试创建一个的代码 - 在一篇文章中涉及多个主题的多个问题可能会阻止未来的读者找到仅针对其中一个主题的解决方案他们。