Skip to main content
Slang755489123
Slang755489123
Participating Frequently
January 24, 2019
Answered

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

  • January 24, 2019
  • 2 replies
  • 14314 views

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!

This topic has been closed for replies.
Correct answer Nancy OShea

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.

2 replies

Slang755489123
Slang755489123Author
Participating Frequently
January 30, 2019

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?

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 31, 2019

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— Product User & Community Expert
Slang755489123
Slang755489123Author
Participating Frequently
January 31, 2019

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.

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
January 24, 2019

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— Product User & Community Expert
Slang755489123
Slang755489123Author
Participating Frequently
January 27, 2019

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?

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