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

Report · May 17, 2019

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?

Report · 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · 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

Report · 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>

<head>

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

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

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

</div>

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

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

</div>

$(document).ready(function () {

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

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

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

});

</script>

</body>

</html>

Report · 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>

<head>

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

crossorigin="anonymous"></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>

<h3>Modal 1</h3>

</div>

</div>

<h3>Modal 2</h3>

</div>

</div>

<h3>Modal 3</h3>

</div>

</div>

<h3>Modal 4</h3>

</div>

</div>

<h3>Modal 5</h3>

</div>

</div>

</div>

</body>

</html>

Report · May 20, 2019

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

Adobe Community

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

1 Correct answer