Question

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

<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的建议，我做了以下更改：

添加了基础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中打开1}} ...等等所有区域（仅限点击）。

有解决方法吗？

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

使用以下codepen链接

编辑5：只要我单独查看此页面，@ Edred的解决方案就能完美运行。但是，当我在MOJO Portal中嵌入此页面时，Foundation CSS和JS完全搞砸了MOJO Portal的默认行为。似乎默认的CSS被Foundation覆盖了。有人有解决方法吗？一个简单的jQuery来解决这个问题而不使用Framework / plugin？

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

我需要做哪些更改

我想要＆＃34; div＆＃34;覆盖整个窗口
图像应显示在窗口/屏幕的中央（垂直和水平）
显示映射图像时窗口/屏幕右上角的关闭按钮
用户应该只能在打开图像时单击关闭按钮。窗口/屏幕的所有其他部分应该禁用点击功能/单击屏幕的任何部分除了关闭按钮之外没有任何操作

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

Answer 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();
}

希望它有所帮助。

Answer 2

HTML code：

<!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

在弹出窗口（同一窗口）中显示图像onClick基础图像上的特定区域

2 个答案: