交互式图像（地图）

Question

So I'm trying to make an interactive image for my web page so the A, B, C, ... N points will pop up when clicking on them and reveal a bubble with an image and some writing in it.

enter image description here

Can someone please tell me how to do it? Or where can I fint the information I need?

Answer 1

Creating the image map

As suggested by Badacadabra , you can use Gimp to create an image map, but I also like this online tool: image-maps.com

Give your <area> 's an ID, or something that will allow you to identify them:

<img id="myImage" src="https://i.stack.imgur.com/ErRo2.png" usemap="#myMap" alt="" />
<map name="myMap" id="myMap">
    <area id="node-a" shape="rect" coords="731,159,757,188"/>
    <area id="node-b" shape="rect" coords="685,139,713,168"/>
    <area id="node-c" shape="rect" coords="597,142,625,171"/>
    <!-- ... -->
</map>

Making it responsive

The problem with image maps is that they are not responsive. Since we're not in 2005 anymore, we'll use a plugin to make sure this works well on all screen sizes. This one is nice: Image Map Resizer by David Bradshaw . We can enable it like this:

imageMapResize();

Formatting your data

To assign content to each node, you could use an Object:

var myData = {
    "node-a": {
        "title": "This point A",
        "image": "image-a.jpg",
        "description": "Lorem ipsum A dolor sin amet."
    },
    "node-b": {
        "title": "This point B",
        "image": "image-B.jpg",
        "description": "Lorem ipsum B dolor sin amet."
    },
    /* ... */
};

Creating your popup

If you're not too comfortable with creating your own popups, there are plenty of plugins out there. For this demo, we'll create one of our own (basically an absolutely positioned div we can toggle):

<div id="myBubble">
  <div id="myBubbleContent"></div>
  <div id="myBubbleCloseButton">✕</div>
</div>

Add some styling to it, and make it work with JS:

// References to DOM elements
var areas         = document.getElementsByTagName('area'),
    bubble        = document.getElementById('myBubble'),
    bubbleContent = document.getElementById('myBubbleContent'),
    bubbleClose   = document.getElementById('myBubbleCloseButton');

// On click of an area, open popup
for(var i=0, l=areas.length; i<l; i++) {
  areas[i].addEventListener('click', openBubble, false);
}

// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + content.image + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  bubble.className = 'shown';
}

function closeBubble() {
  bubble.className = '';
}

Full demo

Try it by expanding the snippet below:

 var myData = { "node-a": { "title": "This point A", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=A&w=300&h=110&txttrack=0", "description": "Lorem ipsum A dolor sin amet." }, "node-b": { "title": "This point B", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=B&w=300&h=110&txttrack=0", "description": "Lorem ipsum B dolor sin amet." }, "node-c": { "title": "This point C", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=C&w=300&h=110&txttrack=0", "description": "Lorem ipsum C dolor sin amet." }, "node-d": { "title": "This point D", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=D&w=300&h=110&txttrack=0", "description": "Lorem ipsum D dolor sin amet." }, "node-e": { "title": "This point E", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=E&w=300&h=110&txttrack=0", "description": "Lorem ipsum E dolor sin amet." }, "node-f": { "title": "This point F", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=F&w=300&h=110&txttrack=0", "description": "Lorem ipsum F dolor sin amet." }, "node-g": { "title": "This point G", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=G&w=300&h=110&txttrack=0", "description": "Lorem ipsum G dolor sin amet." }, "node-h": { "title": "This point H", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=H&w=300&h=110&txttrack=0", "description": "Lorem ipsum H dolor sin amet." }, "node-i": { "title": "This point I", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=I&w=300&h=110&txttrack=0", "description": "Lorem ipsum I dolor sin amet." }, "node-j": { "title": "This point J", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=J&w=300&h=110&txttrack=0", "description": "Lorem ipsum J dolor sin amet." }, "node-k": { "title": "This point K", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=K&w=300&h=110&txttrack=0", "description": "Lorem ipsum K dolor sin amet." }, "node-l": { "title": "This point L", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=L&w=300&h=110&txttrack=0", "description": "Lorem ipsum L dolor sin amet." }, "node-m": { "title": "This point M", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=M&w=300&h=110&txttrack=0", "description": "Lorem ipsum M dolor sin amet." }, "node-n": { "title": "This point N", "image": "https://placeholdit.imgix.net/~text?txtsize=70&bg=ff0000&txtclr=ffffff&txt=N&w=300&h=110&txttrack=0", "description": "Lorem ipsum N dolor sin amet." } }; // References to DOM elements var areas = document.getElementsByTagName('area'), bubble = document.getElementById('myBubble'), bubbleContent = document.getElementById('myBubbleContent'), bubbleClose = document.getElementById('myBubbleCloseButton'); // On click of an area, open popup for(var i=0, l=areas.length; i<l; i++) { areas[i].addEventListener('click', openBubble, false); } // On click of close button, close popup bubbleClose.addEventListener('click', closeBubble, false); function openBubble() { var content = myData[this.id]; bubbleContent.innerHTML = '<h3>' + content.title + '</h3>' + '<img src="' + content.image + '" alt="" />' + '<p>' + content.description + '</p>'; bubble.className = 'shown'; } function closeBubble() { bubble.className = ''; } // Make the image map responsive imageMapResize();

 #myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; } #myImage{ display: block; width: 100%; } #myBubble{ position: absolute; background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 15rem; } #myBubble.shown{ display: block; } #myBubble img{ display: block; width: 100%; } #myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; background: #eee; line-height: 1; cursor: pointer; } #myBubbleCloseButton:hover{ background: #000; color: #fff; }

 <!-- Image Map Resizer plugin --> <script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script> <div id="myWrapper"> <img id="myImage" src="https://i.stack.imgur.com/ErRo2.png" usemap="#myMap" alt="" /> <map name="myMap" id="myMap"> <area id="node-a" shape="rect" coords="731,159,757,188"/> <area id="node-b" shape="rect" coords="685,139,713,168"/> <area id="node-c" shape="rect" coords="597,142,625,171"/> <area id="node-d" shape="rect" coords="537,179,565,208"/> <area id="node-e" shape="rect" coords="523,206,551,235"/> <area id="node-f" shape="rect" coords="477,274,505,303"/> <area id="node-g" shape="rect" coords="385,292,413,321"/> <area id="node-h" shape="rect" coords="335,282,363,311"/> <area id="node-i" shape="rect" coords="285,292,313,321"/> <area id="node-j" shape="rect" coords="249,312,277,341"/> <area id="node-k" shape="rect" coords="228,324,256,353"/> <area id="node-l" shape="rect" coords="205,335,233,364"/> <area id="node-m" shape="rect" coords="155,363,183,392"/> <area id="node-n" shape="rect" coords="29,428,57,457"/> </map> <div id="myBubble"> <div id="myBubbleContent"></div> <div id="myBubbleCloseButton">✕</div> </div> </div>

Answer 2

You can use GIMP to generate your map element...

Here is a minimal working example without JavaScript (HTML only):

 <map name="map"> <area shape="circle" coords="46,441,12" title="N"> <area shape="circle" coords="168,374,11" title="M"> <area shape="circle" coords="217,347,11" title="L"> <area shape="circle" coords="238,339,10" title="K"> <area shape="circle" coords="260,323,11" title="J"> <area shape="circle" coords="299,306,10" title="I"> <area shape="circle" coords="348,296,12" title="H"> <area shape="circle" coords="399,308,12" title="G"> <area shape="circle" coords="490,286,10" title="F"> <area shape="circle" coords="537,220,12" title="E"> <area shape="circle" coords="550,195,10" title="D"> <area shape="circle" coords="610,156,10" title="C"> <area shape="circle" coords="699,152,11" title="B"> <area shape="circle" coords="745,174,11" title="A"> </map> <img src="https://i.stack.imgur.com/ErRo2.png" usemap="#map">

Answer 3

Thanks for the insights. I was wondering has anyone seen of examples where the code by @blex has been combined with an image map highlighter? I tried using map highlight , but that prevented image resize from working.

Any thoughts (apart from using imagemapster ), because the pop-up boxes with the close function by @blex are really good!

Thanks in advance