Home/ Questions/Q 6832443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:51:33+00:00

I’m trying to create a simple interactive image map where the user would be

  • 0

I’m trying to create a simple interactive image map where the user would be able to hover the mouse pointer over a part of the image and the setup would in turn animate/show/unhide a pop-up box (not new window!) next to the mouse pointer’s current position containing text, images, &| clickable links.

However, in the example, it is not an image map, but 9 small images. Each image becomes a bit larger when hovered over, and when clicked, loads the image into the right <div> of the page.

I’m looking to satisfy these criteria:

  • I want to use an image map (HTML or other) instead of 9 small images
  • I want the hovering action to also load the image – remove the need to click the image
  • I want the page to be viewable & interactive from all popular viewers – desktop browsers, mobile browsers, iPads, Android tablets, etc…

I’m not sure what platform (aka – mix of dev tools) to use in order to satisfy the list of criteria above. The main goal is for the last item in the list of criteria above to be satisfied. I could probably sacrifice the first or second criteria from the list above if that’s what needs to be done in order to satisfy the last item.

The couple of “platforms” I thought of using were:

  • HTML + CSS
  • jQuery + CSS
  • Flash + Actionscript
  • Javascript + AJAX

What set of tools should I use to pull this off?

Is there a different tool or set of tools that I’m missing and should be using instead of the ones listed above?

Thanks in advance!

EDIT: If you vote to close this, please redirect me to the question that already covers this or please don’t close it! This question is answerable – it’s not a discussion.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is pretty simple to implement in straight HTML/CSS (no JS required), which would be the most widely consumable method. Here’s a simple example:

    You could make the pop-up content as sophisticated as you like – this is a fairly rudimentary example but you can use any arbitrary HTML in the list items. Also, you could sprinkle in some CSS3 animations for the transitions which would look nice and shiny on your fancy modern browsers.

    • 0