Skip to main content
rebekkab20850564
rebekkab20850564
Participant
May 17, 2019
Answered

Re: Modal & Image Map [Branched from Popup box when I click an imagemap]

  • May 17, 2019
  • 2 replies
  • 2523 views

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

This topic has been closed for replies.
Correct answer osgood_

rebekkab20850564  wrote

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

You can use the one image and put some 'anchor' tag hotspots positioned over the image.

Normally I would not use multiple modals, I would use just the 1 modal and populate it with information either from a database or a javascript array of data but I think the below is going to be simpler to understand:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HotSpot</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 17px;

}

* {

box-sizing: border-box;

}

h1 {

text-align: center;

margin: 0;

padding: 50px 0 30px 0;

}

.product {

position: relative;

width: 95%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.product {

width: 100%;

}

}

.product img {

max-width: 100%;

}

.hotspot {

position: absolute;

display: inline-block;

background-color: red;

color: #fff;

text-decoration: none;

padding: 10px 15px;

border-radius: 50%;

}

.hotspot:hover {

background-color: #666;

}

@media screen and (max-width: 768px) {

.hotspot {

padding: 5px 10px;

}

}

.spot_1 {

top: 60%;

left: 23%;

}

.spot_2 {

top: 50%;

left: 42%;

}

.spot_3 {

top: 30%;

left: 55%;

}

.spot_4 {

top: 20%;

left: 70%;

}

.spot_5 {

top: 55%;

left: 60%;

}

.modal {

position: absolute;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

display: none;

box-shadow: 2px 2px 9px 4px rgba(0, 0, 0, 0.2);

width: 40%;

margin: 0 30%;

color: #000;

}

.modal h3 {

margin: 0;

padding: 10px 0;

}

.modal p {

margin: 0;

padding: 0 0 5px 0;

}

.modal_info {

padding: 15px;

}

.modal_info a{

position: absolute;

top: -28px;

right: 0;

display: inline-block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 7px 10px 4px 10px;

}

@media screen and (max-width: 768px) {

.modal_1, .modal_2, .modal_3, .modal_4, .modal_5 {

top: 0;

margin: 0 5%;

transform: translateY(0);

width: 90%;

}

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.product a').css('cursor' , 'pointer').click(function(){

$('.modal').fadeOut();

var modal = $(this).attr('data-modal');

if($(modal).is(':visible') == true) {

$(modal).fadeOut();

}

else {

$(modal).fadeIn();

}

});

});

</script>

</head>

<body>

<h1>Product Diagram</h1>

<div class="product">

<a href="#" class="hotspot spot_1" data-modal=".modal_1">+</a>

<a href="#" class="hotspot spot_2" data-modal=".modal_2">+</a>

<a href="#" class="hotspot spot_3" data-modal=".modal_3">+</a>

<a href="#" class="hotspot spot_4" data-modal=".modal_4">+</a>

<a href="#" class="hotspot spot_5" data-modal=".modal_5">+</a>

<img src="https://images.unsplash.com/photo-1549480017-d76466a4b7e8" alt="Tiger">

<div class="modal modal_1">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1553054366-ebbf4296eb32" alt="Tiger">

<h3>Modal 1</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_1 -->

<div class="modal modal_2">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1557973254-3b9af1ee03aa" alt="Tiger">

<h3>Modal 2</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_2 -->

<div class="modal modal_3">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1545462616-efed1939219f" alt="Tiger">

<h3>Modal 3</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_3 -->

<div class="modal modal_4">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1494979362559-7f9efdc9b88c" alt="Tiger">

<h3>Modal 4</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_4 -->

<div class="modal modal_5">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1477764250597-dffe9f601ae8" alt="Tiger">

<h3>Modal 5</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_5 -->

</div>

<!-- end product -->

</body>

</html>

2 replies

O
osgood_Correct answer
Legend
May 20, 2019

rebekkab20850564  wrote

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

You can use the one image and put some 'anchor' tag hotspots positioned over the image.

Normally I would not use multiple modals, I would use just the 1 modal and populate it with information either from a database or a javascript array of data but I think the below is going to be simpler to understand:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HotSpot</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 17px;

}

* {

box-sizing: border-box;

}

h1 {

text-align: center;

margin: 0;

padding: 50px 0 30px 0;

}

.product {

position: relative;

width: 95%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.product {

width: 100%;

}

}

.product img {

max-width: 100%;

}

.hotspot {

position: absolute;

display: inline-block;

background-color: red;

color: #fff;

text-decoration: none;

padding: 10px 15px;

border-radius: 50%;

}

.hotspot:hover {

background-color: #666;

}

@media screen and (max-width: 768px) {

.hotspot {

padding: 5px 10px;

}

}

.spot_1 {

top: 60%;

left: 23%;

}

.spot_2 {

top: 50%;

left: 42%;

}

.spot_3 {

top: 30%;

left: 55%;

}

.spot_4 {

top: 20%;

left: 70%;

}

.spot_5 {

top: 55%;

left: 60%;

}

.modal {

position: absolute;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

display: none;

box-shadow: 2px 2px 9px 4px rgba(0, 0, 0, 0.2);

width: 40%;

margin: 0 30%;

color: #000;

}

.modal h3 {

margin: 0;

padding: 10px 0;

}

.modal p {

margin: 0;

padding: 0 0 5px 0;

}

.modal_info {

padding: 15px;

}

.modal_info a{

position: absolute;

top: -28px;

right: 0;

display: inline-block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 7px 10px 4px 10px;

}

@media screen and (max-width: 768px) {

.modal_1, .modal_2, .modal_3, .modal_4, .modal_5 {

top: 0;

margin: 0 5%;

transform: translateY(0);

width: 90%;

}

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.product a').css('cursor' , 'pointer').click(function(){

$('.modal').fadeOut();

var modal = $(this).attr('data-modal');

if($(modal).is(':visible') == true) {

$(modal).fadeOut();

}

else {

$(modal).fadeIn();

}

});

});

</script>

</head>

<body>

<h1>Product Diagram</h1>

<div class="product">

<a href="#" class="hotspot spot_1" data-modal=".modal_1">+</a>

<a href="#" class="hotspot spot_2" data-modal=".modal_2">+</a>

<a href="#" class="hotspot spot_3" data-modal=".modal_3">+</a>

<a href="#" class="hotspot spot_4" data-modal=".modal_4">+</a>

<a href="#" class="hotspot spot_5" data-modal=".modal_5">+</a>

<img src="https://images.unsplash.com/photo-1549480017-d76466a4b7e8" alt="Tiger">

<div class="modal modal_1">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1553054366-ebbf4296eb32" alt="Tiger">

<h3>Modal 1</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_1 -->

<div class="modal modal_2">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1557973254-3b9af1ee03aa" alt="Tiger">

<h3>Modal 2</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_2 -->

<div class="modal modal_3">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1545462616-efed1939219f" alt="Tiger">

<h3>Modal 3</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_3 -->

<div class="modal modal_4">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1494979362559-7f9efdc9b88c" alt="Tiger">

<h3>Modal 4</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_4 -->

<div class="modal modal_5">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1477764250597-dffe9f601ae8" alt="Tiger">

<h3>Modal 5</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_5 -->

</div>

<!-- end product -->

</body>

</html>

    rebekkab20850564
    rebekkab20850564Author
    Participant
    May 20, 2019

    Wow! This is incredible! Thank you so much! I just tried it and it works. Amazing!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 17, 2019

    I have branched this to a new discussion.

    #1 problem:  Old fashioned raster image maps are not responsive.  The hotspots inevitably drift out of register when the image re-scales to fit smaller devices.

    Why do you need an image map for this?  Could you use individual images instead of a map?

    Nancy O'Shea— Product User & Community Expert
    rebekkab20850564
    rebekkab20850564Author
    Participant
    May 20, 2019

    Thank you.

    I have only one image in which I would like to connect several parts of it with a popup window. That's why I suggested that I have to use imagemap, although I know it's not convenient for responsive websites.

    Do you have a better suggestion what I could do? My idea was to create something similar to Sony's image of the camera modulars like here (upper middle of the page): Kleine robuste Premiumkamera RX0 II | DSC-RX0M2 | Sony DE

    rebekkab20850564
    rebekkab20850564Author
    Participant
    May 20, 2019

    I could also use several images. But how would the code look like then? If I insert the same code with another img src it doesn't work. :/

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Modal</title>

    <style>

      *{

       margin: 0;

       padding: 0;

       box-sizing: border-box;

      }

      body{

       font-family: calibri;

      }

      a:link,

      a:visited{

       text-decoration: none;

      }

      .modal{

       background-color: rgba(0,0,0, .8);

       width:100%;

       height: 100vh;

       position: absolute;

       top: 0;

       left: 0;

       z-index: 10;

       opacity: 0;

       visibility: hidden;

       transition: all .5s;

      }

      .modal__content{

       width: 30%;

       height: 30%;

       background-color: #fff;

       position: absolute;

       top: 50%;

       left: 50%;

       transform: translate(-50%, -50%);

       padding: 2em;

       border-radius: 1em;

       opacity: 0;

       visibility: hidden;

       transition: all .5s;

      }

      #modal:target{

       opacity: 1;

       visibility: visible;

      }

      #modal:target .modal__content{

       opacity: 1;

       visibility: visible;

      }

      .modal__close{

       color: #363636;

       font-size: 2em;

       position: absolute;

       top: .5em;

       right: 1em;

      }

      .modal__heading{

       color: #e11021;

       margin-bottom: 1em;

      }

      .modal__paragraph{

       line-height: 1.5em;

      }

    .modal-open{

    display: inline-block;

    color: #e11021;

    margin: 2em;

    }

    </style>

    </head>

    <body>

    <div class="to is-default-on">

      <img src="https://www.expo21xx.com/news/wp-content/uploads/Allied-Mako-G-508-POL-camera-700x389.jpg" width="145" height="126" alt="camera" usemap="#cameramap">

      <map name="cameramap">

        <area shape="rect" coords="46,38,338,242" alt="links" href="#modal">

      <div class="modal" id="modal">

        <div class="modal__content">

          <a href="#" class="modal__close">&times;</a>

          <h2 class="modal__heading">Headline</h2>

          <p class="modal__paragraph">Content 1.</p>

        </div>

    <div class="to is-default-on">

      <img src="https://www.alliedvision.com/fileadmin/_processed_/c/e/csm_Alvium_chip_250e5fec08.png" width="145" height="126" alt="camera" usemap="#cameramap">

      <map name="cameramap">

        <area shape="rect" coords="46,38,338,242" alt="links" href="#modal">

      <div class="modal" id="modal">

        <div class="modal__content">

          <a href="#" class="modal__close">&times;</a>

          <h2 class="modal__heading">Headline2</h2>

          <p class="modal__paragraph">Content 2.</p>

        </div>   

       

    </div>

    <script type="text/javascript">

    $(document).ready(function () {

            $('#myModal').on('show.bs.modal', function (e) {

                var image = $(e.relatedTarget).attr('src');

                $(".img-responsive").attr("src", image);

            });

    });

    </script>

     

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices