所以我正在尝试为我的网页制作一个交互式图像，这样点击它们时会弹出A，B，C，...... N点，并显示一个带有图像和一些文字的气泡。
有人可以告诉我怎么做吗？或者我在哪里可以找到我需要的信息？
答案 0 :(得分：1)
您可以使用 GIMP 生成地图元素...
这是一个没有JavaScript的最小工作示例（仅限HTML）：
<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">
答案 1 :(得分：0)
根据Badacadabra的建议，您可以使用Gimp创建图片地图，但我也喜欢这个在线工具：image-maps.com
为您的<area>提供一个ID，或者允许您识别它们的内容：
<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>
图像映射的问题在于它们没有响应。由于我们不再在2005年了，我们将使用插件来确保它适用于所有屏幕尺寸。这个很好：Image Map Resizer by David Bradshaw。我们可以这样启用它：
imageMapResize();
要为每个节点分配内容，您可以使用对象：
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."
},
/* ... */
};
如果您对创建自己的弹出窗口不太满意，那么有很多插件。对于这个演示，我们将创建一个我们自己的（基本上是一个绝对定位的div，我们可以切换）：
<div id="myBubble">
<div id="myBubbleContent"></div>
<div id="myBubbleCloseButton">✕</div>
</div>
为它添加一些样式，并使其与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 = '';
}
通过展开以下代码段来尝试：
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>