Display image in a popup (same window) onClick of a particular area on the base image

Asked 2/12, 2015 at 15:18 Answered 3/12, 2015 at 8:0

Solved javascript jquery html css imagemap

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

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.

How do I achieve this?

Edit 1: image

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.

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

Added 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

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

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

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 foundation documents 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*640 to 900*1600 to 1280*960 to 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 ?

Improve the solution using the following codepen link

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?

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.

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

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

Backstage answered 2/12, 2015 at 15:18 Comment(14)

You will need to code some javascript to "open a popup in the same window", otherwise just switch target="_self" to target="_blank" to open the images in a new window – Henebry 2/12, 2015 at 15:23

I think that you are looking for a "modal". Is it? w3schools.com/bootstrap/bootstrap_modal.asp – Wardell 2/12, 2015 at 15:24

@Henebry I don't want to open it in a new window ... It should open in the same window only – Backstage 2/12, 2015 at 15:25

@Wardell sort of... But then for that to happen, I will have to turn my images into button? – Backstage 2/12, 2015 at 15:26

@Henebry I am not too familiar with JS.... Can you guide me to a solution? – Backstage 2/12, 2015 at 15:30

You can do something like this too: codepen.io/Edrees21/full/BobqrK Then you only need to add foundation js in your source + one line of code as in the example to call the foundation modal – Dibasic 2/12, 2015 at 15:37

I cant find a code in your link.... Will have to signup to see your code? Also how do I replace the text displayed in the modal dialog with the image? – Backstage 2/12, 2015 at 15:41

updated it and here is the link where you can see the code: codepen.io/Edrees21/pen/BobqrK – Dibasic 2/12, 2015 at 15:44

@Edrees I saw your code and its quite close to what I am looking for... How do I use it with area tags? – Backstage 2/12, 2015 at 15:50

If you look at the code, i have added some explanation/ description. For every element you want to open in a modal, you need to add an unique attribute data-reveal-id and that will be used as an id in your modal dialogue, so in your case, try to add it to the area tags – Dibasic 2/12, 2015 at 15:57

can you create a codepen with your code + images and I will try to have a look at it – Dibasic 3/12, 2015 at 7:50

codepen.io/Edrees21/pen/NxKERQ – Dibasic 3/12, 2015 at 8:6

@Edrees your last codepen was exactly what I was looking for... Worked like a charm. I was using a different version of jQuery and Foundation js and that was causing my code to not function.. Please put up your code in the answer so that I can mark it as "Accepted".... It will be useful for future readers too. – Backstage 3/12, 2015 at 11:40

I added it and I'm glad it worked for you :) – Dibasic 3/12, 2015 at 13:56

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:

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="https://i.sstatic.net/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.

Representative answered 2/12, 2015 at 15:37 Comment(13)

Will I have to put all my <img>, <map> and <area> tags inside the <div id='modal-content'> tag? – Backstage 2/12, 2015 at 15:43

Or do I need to use separate divs for each area tag ? – Backstage 2/12, 2015 at 15:53

I understood that you want to add only the selected image, isn't it? – Representative 2/12, 2015 at 15:54

It would be really nice if you use your answer in my code and write a complete answer.. I tried using your code but maybe I am not using it in the right way. – Backstage 3/12, 2015 at 6:41

I'm sorry, yesterday I haven't time, but I saw that your question has already been answered. Anyway, I puted it here: codepen.io/anon/pen/MKgxVb – Representative 3/12, 2015 at 12:16

That's OK... but your code doesn't have the functionality of a popup or a modal dialog which I was looking for... It simply opens the image in the same window – Backstage 3/12, 2015 at 12:30

I am accepting your answer till Edrees puts up his.... which is slightly better than your's (he used foundation js though) and you worked hard.... I would have loved to accept both.. but unfortunately SO doesn't allows that – Backstage 3/12, 2015 at 13:10

After going through a lot of links, I realised your solution is purely a customer for all weather. I would like you to fine-tune your solution a bit. Also I want to seek clarification on few things. If you can start a discussion with me here, it would be really nice. – Backstage 8/12, 2015 at 7:7

Sure, which clarification do you need? – Representative 8/12, 2015 at 12:17

what is the reason for putting left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; ? Check "Edit 6" of my question – Backstage 8/12, 2015 at 12:20

It's used to put the div in the middle center of screen. When you set left and top 50% the elemment will appear from 50%, so it wont be in center yet, so, you use a negative margin to bring the layer back to center position. – Representative 8/12, 2015 at 12:23

How did you rounded up -250px as accurate? doesn't this depends on the window size/resolution, etc? – Backstage 8/12, 2015 at 12:29

No, depends of the div size, it's always that half of width and height size, e.g: width: 600px; height: 400px; so...... margin-left: -300px; margin-top: -200px; – Representative 8/12, 2015 at 12:34

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: Files needed: JQuery + foundation.js

JS code: $(document).foundation();

For a complete working code visit this link

Dibasic answered 3/12, 2015 at 8:0 Comment(10)

Here with "Run code snippet" it is not working as expected... It is loading all the images beforehand – Backstage 3/12, 2015 at 14:49

Also, is there a way in which I can display a close sign (X) at top-right of the image opened in reveal-modal? I have images of various sizes (ranging from 612*640 to 900*1600 to 1280*960 to 1920*1080)... how do I resize this proportionally in reveal-modal ? – Backstage 3/12, 2015 at 15:11

Even in your codepen code... the image of sun is larger than other images and thus we have to scroll down to see the entire image... Is there a way to control that? – Backstage 3/12, 2015 at 15:18

To add the close button, i think it would be better to put the image inside a div container with the data-reveal attr on the div instead of image and add a close button underneath the image inside the same container. – Dibasic 3/12, 2015 at 15:53

Can you please edit your codepen? Or perhaps make use of class="close-reveal-modal" – Backstage 3/12, 2015 at 16:9

Your codepen solution is working as expected in codepen but when I implemented it in my code... it is not displaying the image in modal.. I can only see the cross sign to close the image. Can you tell me where am I going wrong? – Backstage 4/12, 2015 at 9:31

Have you got a link to the page or an example of your code in codepen or else where to have a look at it? – Dibasic 4/12, 2015 at 10:35

I missed out on something and that's the reason it was not working. I was able to successfully run this page. However, when I embedded this page in my MOJO Portal, Foundation Files screwed up my portal. Turns out that Foundation CSS and Foundation JS overrides default behavior of the Portal and so will need a solution in plain jQuery without the use of plugins or libraries. Do you have one? – Backstage 7/12, 2015 at 5:12

I would say, next time do your homework well before asking random questions. – Dibasic 8/12, 2015 at 14:14

I am a fresher, homework comes with experience. I will try my best to ask as accurate as it can. Thanks for your help though and a wonderful piece of knowledge and information. I am sure this will help me sometime in future. – Backstage 8/12, 2015 at 14:22

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags