使用 JavaScript 添加 HTML 映射图像

Question

我是新手，经过大量搜索后我还没有找到答案所以我想 post。

我正在制作一个网站，每个页面都需要相同的 HTML，但还需要在按钮点击时使用不同的样式表。

因此，对于我正在制作的其中一个 "skins"，我遇到了一些导航问题，这些问题已通过图像映射解决。为此添加 HTML 会改变其他皮肤，所以我正在寻找一些 javascript 以在单击按钮时添加此 HTML。

到目前为止，我得到了这个，但它不起作用！

document.getElementById("test").innerHTML+= "<img id="Image-Maps-Com-image-maps-2016-05-29-194027" src="http://butterybeast.hol.es/butterworldwithlabels.png" border="0" width="1037" height="753" orgWidth="1037" orgHeight="753" usemap="#image-maps-2016-05-29-194027" alt="" />

";

在我的代码笔上看到它（不工作）（虽然我看不到这个 link。我想我也把它弄坏了... 叹息） : http://codepen.io/Puffincat/pen/VjwxXG

以及整个网站思路的参考，我可能没有解释得太好.... http://butterybeast.hol.es/button.html

我一直在努力解决整个导航问题。这是一场噩梦！如果有更好的图像映射解决方案，我愿意接受！这不是我理想的解决方案，我想要一些悬停动画 - 但将图像放在正确的位置是不值得的。

无论如何，因为这是我的第一个 post 如果我做错了什么，请告诉我，等等......等等。我非常感谢这个网站，我从中得到了很多有用的答案！不想滥用它。

谢谢！

Answer 1

你的javascript格式应该是

选项 1

在 " "（双引号）

中使用 \（反斜杠）转义字符

document.getElementById("test").innerHTML += "<img id=\"Image-Maps-Com-image-maps-2016-05-29-194027\" src=\"http://butterybeast.hol.es/butterworldwithlabels.png\" border=\"0\" width=\"1037\" height=\"753\" orgWidth=\"1037\" orgHeight=\"753\" usemap=\"#image-maps-2016-05-29-194027\" alt="" />\
<map name=\"image-maps-2016-05-29-194027\" id=\"ImageMapsCom-image-maps-2016-05-29-194027\">\
<area shape=\"rect\" coords=\"1035,751,1037,753\"/>\
<area alt="" title="" href=\"#\" shape=\"poly\" coords=\"16,314,225,94,289,166,68,382\" style=\"outline:none;\" target=\"_self\"     />\
<area alt="" title="" href=\"#\" shape=\"poly\" coords=\"390,102,643,35,662,117,402,174\" style=\"outline:none;\" target=\"_self\"     />\
<area alt="" title="" href=\"#\" shape=\"poly\" coords=\"735,60,1030,211,978,294,690,139\" style=\"outline:none;\" target=\"_self\"     /></map>";

选项 2

在 ' '（单引号）内使用 " "（双引号）

document.getElementById("test").innerHTML += '<img id="Image-Maps-Com-image-maps-2016-05-29-194027" src="http://butterybeast.hol.es/butterworldwithlabels.png" border="0" width="1037" height="753" orgWidth="1037" orgHeight="753" usemap="#image-maps-2016-05-29-194027" alt="" />\
<map name="image-maps-2016-05-29-194027" id="ImageMapsCom-image-maps-2016-05-29-194027">\
<area shape="rect" coords="1035,751,1037,753"/>\
<area alt="" title="" href="#" shape="poly" coords="16,314,225,94,289,166,68,382" style="outline:none;" target="_self"     />\
<area alt="" title="" href="#" shape="poly" coords="390,102,643,35,662,117,402,174" style="outline:none;" target="_self"     />\
<area alt="" title="" href="#" shape="poly" coords="735,60,1030,211,978,294,690,139" style="outline:none;" target="_self"     /></map>';

选项 3

在 " "（双引号）内使用 ' '（单引号）。您也可以省略 ' '（单引号）

document.getElementById("test").innerHTML += "<img id='Image-Maps-Com-image-maps-2016-05-29-194027' src='http://butterybeast.hol.es/butterworldwithlabels.png' border='0' width='1037' height='753' orgWidth='1037' orgHeight='753' usemap='#image-maps-2016-05-29-194027' alt='' />\
<map name='image-maps-2016-05-29-194027' id='ImageMapsCom-image-maps-2016-05-29-194027'>\
<area shape='rect' coords='1035,751,1037,753' />\
<area alt='' title='' href='#' shape='poly' coords='16,314,225,94,289,166,68,382' style='outline:none;' target='_self'     />\
<area alt='' title='' href='#' shape='poly' coords='390,102,643,35,662,117,402,174' style='outline:none;' target='_self'     />\
<area alt='' title='' href='#' shape='poly' coords='735,60,1030,211,978,294,690,139' style='outline:none;' target='_self'     /></map>";

我在每行的末尾添加了 \（反斜杠）以将所有分隔的元素粘在一起。

使用 JavaScript 添加 HTML 映射图像

Adding a HTML mapped image with JavaScript

html

javascript

mapping

image

选项 1

选项 2

选项 3