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

Question

提问by John

I have used Image Mapping to specify which image to display if a user clicks on a particular area on the image. Here is my code:

我已经使用图像映射来指定如果用户单击图像上的特定区域要显示哪个图像。这是我的代码：

<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.jpg" shape="poly" coords="248,177,365,177,364,257,248,256" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="386,193,501,180,510,258,394,271" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="539,221,650,250,631,327,518,299" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="128,277,222,271,228,369,135,375" style="outline:none;" target="_self"     />
<area  alt="" title="" href="abc.jpg" shape="poly" coords="238,281,352,265,360,325,359,342,250,359" style="outline:none;" target="_self"     />
</map>

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

This code results in the following image:

此代码产生以下图像：

What I want is images 1, 2, 3, 4, 5 should open in a popup in the same window if a user clicks on the co-ordinates specified.

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

How do I achieve this?

我如何实现这一目标？

Edit 1:image

编辑 1：图像

The base image is a single image. 1, 2, 3, 4, 5 are the areas with specific co-ordinates on the image. Each area has a corresponding image which opens in a popup only when a user clicks on a particular area with specific co-ordinates.

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

Edit 2:As suggested by @Edrees, I have made the following changes:

Added Foundation JS

编辑 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>

Used data-reveal-id

用过的 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> -->

This didn't made any difference to my results.

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

Edit 3:I am still struggling to get a working solution to this. Just to clarify again what I am looking for:

编辑 3：我仍在努力为此找到一个可行的解决方案。只是为了再次澄清我在寻找什么：

Base Image is a single image having areas 1, 2, 3, 4, 5.
Each area (1, 2, 3, 4, 5) has a corresponding image.
I want a functionality where if I click on area 1, it's corresponding image opens in a modal dialog, if I click on area 2, it's corresponding image opens in a modal dialog... so forth and so on for all the areas (only on click).

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

Is there a workaround for this?

有解决方法吗？

Edit 4:As per Edrees's solution, I was able to implement the functionality what I looking for. Further, I need to fine-tune this solution by including a close button or link at top-right of the reveal-modal. I saw some foundationdocuments and found out that there is a class called **close-reveal-modal**used for this purpose, but I don't know how to implement this in my solution. Also I have images of sizes ranging from 612*640to 900*1600to 1280*960to 1920*1080... how do I ensure that the image opened inside the modal resize proportionally (i.e. image maintains the ratio) as per the window size ?

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

Improve the solution using the following codepenlink

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

Edit 5:The solution by @Edrees worked perfectly as long as I was viewing this page separately. However, when I embedded this page in MOJO Portal, Foundation CSS and JS completely screwed up the default behavior of MOJO Portal. It seems that default CSS was overridden by Foundation. Does anyone has a workaround for it? A plain jQuery to solve this without using Framework/plugin?

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

Edit 6:After facing issues with foundation framework, I realised that Rodrigo Leite has an answer to solve this issue. Although, I don't find any modal dialog being opened, it does give a feel of dialog box to the user and suffice for my requirements.

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

What changes I need:

我需要什么改变：

I want the "div" to cover the entire window
Image should be displayed at the center (vertically and horizontally) of the window/screen
A close button at the top-right of the window/screen when the mapped image is displayed
A user should be able to click only the close button when image is opened. All other part of the window/screen should disable the click functionality / no action on clicking on any part of the screen except close button

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

NOTE:The close button can be displayed in any form i.e. image, button, etc.

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

Answer 1

采纳答案by Rodrigo Leite

You can create your own modal div and put it invisible, then, when the user click on area you can use javascript to show this modal and put your content inside it. Take a look:

您可以创建自己的模态 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();
}

Hope it helps.

希望能帮助到你。

Answer 2

回答by SED

HTML code:

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 code: $(document).foundation();

JS代码：$(document).foundation();

For a complete working code visit thislink

有关完整的工作代码，请访问此链接

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

提问by John

采纳答案by Rodrigo Leite

回答by SED

相关推荐

最近更新

标签

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

提问by John

采纳答案by Rodrigo Leite

回答by SED

相关推荐

javascript 选中复选框时启用提交按钮

javascript 如何使用 jquery 将新项目动态添加到此表单中的下拉列表中？

错误不允许在 javaScript 中加载本地资源

javascript 如何绕过 FormSpree 重定向？

相关推荐

最近更新

标签