在基础图像上的特定区域单击时在弹出窗口（同一窗口）中显示图像答案

【问题标题】：Display image in a popup (same window) onClick of a particular area on the base image在基础图像上的特定区域单击时在弹出窗口（同一窗口）中显示图像
【发布时间】：2016-03-06 21:44:56
【问题描述】：

我使用图像映射来指定当用户单击图像上的特定区域时要显示的图像。这是我的代码：

<html>    
<body>
<div align="center">

<img id="IMGMAPS" src="base.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area  alt="" title="" href="abc\1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\2.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\3.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\4.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc\5.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

</div>
</body>
</html>

此代码生成以下图像：

如果用户单击指定的坐标，我想要的是图像 1、2、3、4、5 应该在同一窗口的弹出窗口中打开。

我如何做到这一点？

编辑 1： image

基本图像是单个图像。 1、2、3、4、5是图像上具有特定坐标的区域。每个区域都有一个对应的图像，只有当用户单击具有特定坐标的特定区域时，才会在弹出窗口中打开。

编辑 2： 根据@Edrees 的建议，我进行了以下更改：

添加了 Foundation JS

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js" ></script>
<script>
$(document).foundation();
</script>

使用data-reveal-id

<img id="IMGMAPS" src="selfie.jpg" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" data-reveal-id="firstModal" data-reveal  />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="selfie.jpg" />

<!--<div id="firstModal" class="reveal-modal" data-reveal> -->
<area  alt="" title="" href="Shortlisted_selfie\VenkateshSittula.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"  id="firstModal" class="reveal-modal" data-reveal   />
<a class="close-reveal-modal">&#215;</a>
<!-- </div> -->

这对我的结果没有任何影响。

编辑 3： 我仍在努力寻找可行的解决方案。再次澄清我在寻找什么：

基础图像是具有区域 1、2、3、4、5 的单个图像。
每个区域（1、2、3、4、5）都有对应的图像。
我想要一个功能，如果我点击区域 1，它对应的图像会在 modal dialog 中打开，如果我点击区域 2，它对应的图像会在 modal dialog 中打开......等等等等所有区域（仅在点击时）。

有解决办法吗？

编辑 4： 根据 Edrees 的解决方案，我能够实现我正在寻找的功能。此外，我需要通过在reveal-modal 的右上角包含一个关闭按钮或链接来微调此解决方案。我看到了一些foundation 文档，发现有一个名为**close-reveal-modal** 的类用于此目的，但我不知道如何在我的解决方案中实现它。我也有尺寸从 612*640 到 900*1600 到 1280*960 到 1920*1080 的图像>...如何确保在模态中打开的图像根据窗口大小按比例调整大小（即图像保持比例）？

使用以下codepen 链接改进解决方案

编辑 5：只要我单独查看此页面，@Edrees 的解决方案就可以完美运行。然而，当我将此页面嵌入 MOJO Portal 时，Foundation CSS 和 JS 完全搞砸了 MOJO Portal 的默认行为。似乎默认 CSS 已被 Foundation 覆盖。有没有人有解决方法？一个普通的 jQuery 来解决这个问题而不使用框架/插件？

编辑 6： 在面对基础框架的问题后，我意识到 Rodrigo Leite 有解决这个问题的答案。虽然，我没有发现任何打开的模式对话框，但它确实给用户一种对话框的感觉，并且足以满足我的要求。

我需要什么改变：

我希望“div”覆盖整个窗口
图像应显示在窗口/屏幕的中心（垂直和水平）
显示映射图像时窗口/屏幕右上角的关闭按钮
当图像打开时，用户应该只能单击关闭按钮。窗口/屏幕的所有其他部分都应禁用点击功能/点击屏幕的任何部分，关闭按钮除外

注意：关闭按钮可以以任何形式显示，即图像、按钮等。

【问题讨论】：

你需要编写一些javascript来“在同一个窗口中打开一个弹出窗口”，否则只需将target="_self"切换到target="_blank"即可在新窗口中打开图像
你也可以这样做：codepen.io/Edrees21/full/BobqrK 然后你只需要在你的源代码中添加基础js + 一行代码，如示例调用基础模态
更新了它，这里是你可以看到代码的链接：codepen.io/Edrees21/pen/BobqrK
如果您查看代码，我添加了一些解释/描述。对于您要在模态中打开的每个元素，您需要添加一个唯一属性 data-reveal-id 并将其用作模态对话中的 id，因此在您的情况下，请尝试将其添加到区域标签
codepen.io/Edrees21/pen/NxKERQ

标签： javascript jquery html css imagemap

【解决方案1】：

您可以创建自己的模态 div 并将其隐藏，然后，当用户单击区域时，您可以使用 javascript 显示此模态并将您的内容放入其中。看看：

css

#modal-background{
   width: 100%;
   height: 100%;
   background-color: #000000;
   position: fixed;
   top: 0; left: 0;
   display: none;
   z-index: 99;
}

#modal-content{
   background-color: #FFFFFF;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -250px;
   margin-top: -250px;
   z-index: 100;
}

html

    <div id='modal-background'>
        <div id='modal-content'>
        </div>
    </div>

<img id="IMGMAPS" src="http://i.stack.imgur.com/zir2T.png" border="0" width="802" height="1026" orgWidth="802" orgHeight="1026" usemap="#image-maps" alt="" />
<map name="image-maps" id="IMGMAPS">
<area shape="rect" coords="800,1024,802,1026" alt="Image Map" style="outline:none;" title="Image Map" href="base.jpg" />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" data-imageurl="http://s.hswstatic.com/gif/smart-car-1.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

javascript (jquery)：

$(document).ready(function(){

        $('area').click(function(){
            $('#modal-content').html('<img src=' + $(this).data('imageurl') +'>');
            $('#modal-background').fadeIn();
         });

        $('#modal-background').click(function(){
            closeModal();
         });

});

function closeModal(){
  $('#modal-background').fadeOut();
}

希望对你有帮助。

【讨论】：

我是否必须将我所有的、和标签放在
标签内？
或者我需要为每个区域标签使用单独的 div 吗？
我知道您只想添加选定的图像，不是吗？
如果你在我的代码中使用你的答案并写一个完整的答案，那就太好了。我尝试使用你的代码，但也许我没有以正确的方式使用它。
对不起，昨天没时间，但我看到你的问题已经回答了。无论如何，我把它放在这里：codepen.io/anon/pen/MKgxVb

【解决方案2】：

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script>
</head>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="" data-reveal-id="one">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="" data-reveal-id="two">
  <area shape="circle" coords="124,58,8" alt="Venus" href="" data-reveal-id="three">
</map>
<img src="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" width="145" height="126" alt="Planets" id="one" data-reveal class="reveal-modal">

<img src="http://news.bbcimg.co.uk/media/images/65904000/jpg/_65904720_mdis_global_enhancedcolor_caloris_orth_hd.jpg" width="145" height="126" alt="Planets" id="two" data-reveal class="reveal-modal">

<img src="https://upload.wikimedia.org/wikipedia/commons/1/10/Kepler10b_artist.jpg" width="145" height="126" alt="Planets" id="three" data-reveal class="reveal-modal">


<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>

Javascript：所需文件：JQuery + foundation.js

JS 代码： $(文档).foundation();

如需完整的工作代码，请访问此link

【讨论】：

这里使用“运行代码 sn-p”它没有按预期工作......它正在预先加载所有图像
另外，有没有一种方法可以在以显示模式打开的图像的右上角显示关闭符号 (X)？我有各种尺寸的图像（范围从 612*640 到 900*1600 到 1280*960 到 1920*1080）...如何在显示模式中按比例调整大小？
即使在您的 codepen 代码中... sun 的图像也比其他图像大，因此我们必须向下滚动才能看到整个图像... 有没有办法控制它？跨度>
要添加关闭按钮，我认为最好将图像放在 div 容器中，并在 div 上使用 data-reveal attr 而不是图像，然后在图像下方添加关闭按钮同一个容器。
我是新手，功课自带经验。我会尽我所能，尽可能准确地询问。感谢您的帮助以及精彩的知识和信息。我相信这将在未来的某个时候对我有所帮助。