Highlighted

Popup box when I click on an imagemap within an image?

New Here ,
Jan 24, 2019

Copy link to clipboard

Copied

Hi,

Now that Muse has long been discontinued...

I have a large image on a website that has several smaller (numbered dots) images on it. I want to have an image map that will open up a small window that I can add text or links to whenever I click or hover over the smaller (numbered dot) image. Like where a user could hover over a number to get more info?

Is this possible? I know that an image map can open a new webpage, but can it do a hoverbox or imagebox as well?

Thanks!

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

What you want are called tooltips.

The simplest way to make a tooltip is with the TITLE attribute.

<a href="https://example.com" title="This is a link to example.com">LINK</a>

For fancier tooltips, see links below.

I don't recommend using Image Maps in responsive layouts.  The hotspot coordinates invariably fall out of register when image is re-scaled.   A safer approach is to use separate images, buttons or text links.

Topics

How to

Views

4.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Popup box when I click on an imagemap within an image?

New Here ,
Jan 24, 2019

Copy link to clipboard

Copied

Hi,

Now that Muse has long been discontinued...

I have a large image on a website that has several smaller (numbered dots) images on it. I want to have an image map that will open up a small window that I can add text or links to whenever I click or hover over the smaller (numbered dot) image. Like where a user could hover over a number to get more info?

Is this possible? I know that an image map can open a new webpage, but can it do a hoverbox or imagebox as well?

Thanks!

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

What you want are called tooltips.

The simplest way to make a tooltip is with the TITLE attribute.

<a href="https://example.com" title="This is a link to example.com">LINK</a>

For fancier tooltips, see links below.

I don't recommend using Image Maps in responsive layouts.  The hotspot coordinates invariably fall out of register when image is re-scaled.   A safer approach is to use separate images, buttons or text links.

Topics

How to

Views

4.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jan 24, 2019

Copy link to clipboard

Copied

What you want are called tooltips.

The simplest way to make a tooltip is with the TITLE attribute.

<a href="https://example.com" title="This is a link to example.com">LINK</a>

For fancier tooltips, see links below.

I don't recommend using Image Maps in responsive layouts.  The hotspot coordinates invariably fall out of register when image is re-scaled.   A safer approach is to use separate images, buttons or text links.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 27, 2019

Copy link to clipboard

Copied

Thanks! I'll try it out, but I have images on a graph that I need this done on...maybe I can find a way to do this right from illustrator?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 27, 2019

Copy link to clipboard

Copied

Is there any way for this code to be fixed to an image map? The image maps work for me and my site is not responsive, so if I were to add an image map, how could I use this code so I do get that nice popup effect?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 27, 2019

Copy link to clipboard

Copied

Add a TITLE attribute to each anchor tag inside the image map.

<a href="some_link.html" title="tooltip text goes here">

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 27, 2019

Copy link to clipboard

Copied

Sorry, I don't know where to place that in the map code? Here I what I have

<map name="Map">

  <area shape="circle" coords="272,261,21" href="www.google.com" target="new">

 

</map>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 27, 2019

Copy link to clipboard

Copied

As an example, copy & paste this into a new, blank document in Split code/design view.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Image Map</title>

</head>

<body>

<img src="https://dummyimage.com/500x500" alt="image map" width="500" height="500" usemap="#Map">

<map name="Map">

<area shape="rect" coords="7,5,246,180" href="https://example.com" title="Link to Example.com" alt="Example">

<area shape="circle" coords="588,238,208" href="https://google.com" title="Link to Google.com" alt="Google">

<area shape="rect" coords="1,256,218,501" href="https://bing.com" title="Link to Bing.com" alt="Bing">

</map>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 27, 2019

Copy link to clipboard

Copied

Thanks for all your help Nancy!

That works like what I have now, which is fine, but what I need is to have a popup modal window first instead of opening in a new window...is this possible? As I have lots of circles, the idea is to give the end user a brief preview of some text and a link when they click on a circle and if they want to click more they can open a new page and be redirected there. Does that make sense?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 27, 2019

Copy link to clipboard

Copied

Something just like this, but without Muse since it is no longer supported.

How to do an Image Map in Adobe Muse CC - YouTube

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 27, 2019

Copy link to clipboard

Copied

For something like that, you need an interactive SVG map made with something like Image Map Pro.

https://codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/2792438

World Map Example

https://preview.codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/full_screen_p...

Nancy O'Shea, ACP
Alt-Web.com

Likes

1 Like

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

OK, so I am one step closer (thanks to everyone for their input) but what I did was add a hotspot to the selected area on my main image, then added a behavior- add an open browser window.

Now here are some more questions I need help with...

1. I need the window that the image map is linked to via behaviors to be a modal window (say 500px500p) that is a spot for text, an attached PDF and a contact form. Can this be done? Is it best to make the popup window a form and modify form that to hold a PDF and contact us info? Then link to that form from the hotspot-behavior?

2 I have 30 hotspots to do this on, thus 30 separate popup windows (each with a PDF) is there a better way to call the information into the window or should I just create 30 forms, and each form is named 1,2 3 etc and have each PDF attached to them?

Does this make sense?

What I am ultimately trying to achieve is have my main image with 30 hotspots that each open up a modal window that has text, a PDF attached and a contact form...for each hotspot(30) on my main image.

Anyone?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 30, 2019

Copy link to clipboard

Copied

You don't need Modal windows for any of this.  Just keep it simple.

Hotspot 1 links directly to page1.html

Hotspot 2 links directly to page2.html

and so on...

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

I agree with you Nancy, but the project requirements want a modal window within that a PDF, comments section and brief text...which is why I am stuck.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 31, 2019

Copy link to clipboard

Copied

Slang75  wrote

I agree with you Nancy, but the project requirements want a modal window within that a PDF, comments section and brief text...which is why I am stuck.

You can do that using hotspots on your graphic using only the 1 modal window and passing the information into the modal from an onclick event, which evokes the modal window.

Store all the information in an array (see code below bookList [ ] ) - an object { } contains the information for each entry within the array and starts from 0, 1, 2, 3, 4, 5, 6, 7 etc so you can call the information required into the modal by passing the objects position from an onclick function on your hotspot - in the example line of code below 'position 2' is passed to the onclick function.

<area shape="rect" coords="373,5,561,125" @click="selectBook('2')" >

The methods function 'selectBook(position) {'  in the code below grabs the number 2 from the onclick event and passes it to a variable, in this case the variable is the letter i:

-1 is used to set the position to the correct number i.e, position 2 is really position 1 in the array, as 0 is the first position of an array where you store the information. We normally number from 1 upwards, so visually its more in line with what one is used to and can be adjusted back in the code scripting.

const i = position - 1;

So the result would be 1:

const i = 2 - 1 = 1;

The information for book 1 will be returned. The information is seperated and stored into data variables:

bookTitle: '',

bookDetails: '',

bookPdf: '',

bookAuthor: '',

The contents of the data variables can be applied to the html in the following format using double curly brackets wrapping the variable name.

<h1>{{ bookTitle }} </h1>

<p>{{ bookDetails }} </p>

<p>{{ bookPdf }} </p>

<h5>{{ bookAuthor }} </h5>

Have a play around. Its really quite simple once you understand what is going on. You will have to use your own graphic image and hotspots, so replace the code below with your own graphic and hotspots then just add the @click event.

<img src="graphic.jpg" border="0" usemap="#Map" >

<map name="Map" id="Map">

  <area shape="rect" coords="6,5,181,121" @click="selectBook('1')" >

  <area shape="rect" coords="373,5,561,125" @click="selectBook('2')" >

  <area shape="rect" coords="11,229,187,368" @click="selectBook('3')" >

  <area shape="rect" coords="365,219,561,361" @click="selectBook('4')" >

</map>

EXAMPLE PAGE CODE STARTS HERE

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<title>Modal</title>

<style>

body {
margin: 0 auto;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.modal-wrapper {
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
position: absolute;
width: 60%;
margin: 0 15%;
text-align: center;
background-color: #fff;
padding: 30px;
padding-bottom: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

</head>


<body>

<div class="app">

<div class="graphic">

<img src="graphic.jpg" border="0" usemap="#Map" >

<map name="Map" id="Map">

  <area shape="rect" coords="6,5,181,121" @click="selectBook('1')" >

  <area shape="rect" coords="373,5,561,125" @click="selectBook('2')" >

  <area shape="rect" coords="11,229,187,368" @click="selectBook('3')" >

  <area shape="rect" coords="365,219,561,361" @click="selectBook('4')" >

</map>

</div>

<!-- end graphic -->


<transition name="fade">

<div class="modal-wrapper" v-if="modalWrapper">

<div class="modal-content" >

<h1>{{ bookTitle }} </h1>

<p>{{ bookDetails }} </p>

<p>{{ bookPdf }} </p>

<h5>{{ bookAuthor }} </h5>

<div class="modal-footer">

<button @click="closeModal">Close</button>

</div>

<!-- end modal-footer -->

</div>

<!-- end modal-content -->

</div>

<!-- end modal-wrapper -->

</transition>



</div>

<!-- end app -->


<script>

var vm = new Vue({
el: '.app',
data: {
modalWrapper: false,
bookTitle: '',
bookDetails: '',
bookPdf: '',
bookAuthor: '',
bookList: [
{ id: '1', title: 'Title 1', details: 'Details 1', pdf:'book_1.pdf', author: 'Author 1'},
{ id: '2', title: 'Title 2', details: 'Details 2', pdf:'book_2.pdf', author: 'Author 2'},
{ id: '3', title: 'Title 3', details: 'Details 3', pdf:'book_3.pdf', author: 'Author 3'},
{ id: '4', title: 'Title 4', details: 'Details 4', pdf:'book_4.pdf', author: 'Author 4'},
{ id: '5', title: 'Title 5', details: 'Details 5', pdf:'book_5.pdf', author: 'Author 5'}
],
},
methods: {
selectBook(position) {
this.modalWrapper = true;
const i = position - 1;
const book= this.bookList;
this.bookTitle = book.title;
this.bookDetails = book.details;
this.bookPdf = book.pdf;
this.bookAuthor = book.author;
},
closeModal() {
this.modalWrapper = false;
}
}
})
</script>

</body>

</html>

Likes

1 Like

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 31, 2019

Copy link to clipboard

Copied

This is incredible! Thank you! To make things easier for me, how can I have the modal as a simple webpage that I would call using hotspots and behaviors-open new window?

I will have 30 hotspots in total on my image and the behaviors of each open a new browser window, can I have each new window be just the modal with text inside it like 400x400px?

Basically, each hotspot opens a window modal.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 31, 2019

Copy link to clipboard

Copied

I found this code online, that does exactly what I am looking for, but how do I call the #modal to each hotspot on my image? Right now the modal is called from a link on this page...how to I just make the modal a separate page that I can call with behaviours?

<!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>Desi Developer</title>

<style>

  *{

   margin: 0;

   padding: 0;

   box-sizing: border-box;

  }

  body{

   font-family: sans-serif;

  }

  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: 75%;

   height: 65%;

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

   margin-bottom: 1em;

  }

  .modal__paragraph{

   line-height: 1.5em;

  }

.modal-open{

display: inline-block;

color: dodgerblue;

margin: 2em;

}

</style>

</head>

<body>

<a href="#modal" class="modal-open">Open Modal</a>

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

    <div class="modal__content">

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

      <h2 class="modal__heading">Desi Developer</h2>

      <p class="modal__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis possimus inventore suscipit mollitia, odit aliquam laudantium praesentium porro hic asperiores expedita obcaecati earum ullam, nisi laborum accusamus, id placeat tenetur?

      Consequatur, neque. Explicabo, reiciendis quia distinctio eius facere pariatur expedita, amet hic alias illum harum inventore, ullam tempore quos. Quod, repellat ratione culpa qui harum blanditiis atque voluptatem iste id.

      Rerum veniam ipsum quisquam mollitia vel fuga dicta tempora. Magni, labore beatae eaque suscipit mollitia pariatur impedit accusantium explicabo aspernatur adipisci sapiente eveniet qui facilis in voluptas nisi! Ipsum, praesentium!

      Quos, ex. Ipsum asperiores quasi, nam atque voluptatibus reprehenderit repellat fuga pariatur consequatur quae hic, numquam commodi illo aut. Laborum et natus magni illum tenetur est, minus eligendi quisquam facilis.

      Quis enim sit facilis, dolor, ab quas sint sapiente ut voluptatibus excepturi dolorum, consequuntur doloremque error facere? Nisi vel placeat magni asperiores, id, aliquid quisquam eos et eum repellat molestiae.</p>

    </div>

</div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 31, 2019

Copy link to clipboard

Copied

You can try adding the #modal id to the area shape href tag - href="#modal"

Even if this does work its a poor solution in your case as you will need 30 different modals on your page, which also means 30 different css selectors, one for each modal that's why if possible you should try and solve the problem dynamically as the example l provided does.

The code you found is pure css and is more suitable for 1 static modal. Css does not do dynamic, its quite poor and has  its limitations, which are best suited to one off situations

Likes

1 Like

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 31, 2019

Copy link to clipboard

Copied

You must code this dynamically with Ajax as osgood demonstrated.  Found code is not going to work in this particular project.  Also Dreamweaver Behaviors won't work.  This is a good example of why good coding skills (HTML, CSS and JavaScript) are essential. 

Nancy O'Shea, ACP
Alt-Web.com

Likes

2 Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
mkeen LATEST
New Here ,
Jun 22, 2020

Copy link to clipboard

Copied

I just wanted to thank you for this code. One quick bugfix...

const book= this.bookList;

should be...

const book= this.bookList[i];

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group