这实际上只是一个与 ImageMapper jQuery 插件相关的 JavaScript 问题。
我必须重新询问this question由于问题结构不佳和 OP 的回应不明确，该问题已关闭。但是，我遇到了同样的问题，需要帮助。
像之前的OP一样，我试图重现这个jsfiddle:http://jsfiddle.net/nYkAG/396/ ，但 JavaScript 不会运行。
OP 链接到 her attempt to make it work and mine is identical 。 CtrlW 查看标记/javascript。显然我们都错过了一些东西(可能是由于类似的新手因素)。难道是左侧面板jsfiddle中引用的onLoad()函数？
我添加了一个简单的 jQuery 测试，它有效:
$(function() {
alert('Hi');
});
所以我知道库加载正确并且代码中没有明显的错误。然而，我无法理解这些台词，想知道是否缺少某些东西？然而，它们在 jsFiddle 中工作..？
var inArea,
map = $('#beatles'),
captions = { //stuff here },
single_opts = { //stuff here },
all_opts = { //stuff here },
initial_opts = { //stuff here };
opts = $.extend({}, all_opts, initial_opts, single_opts);
无论如何，复制/粘贴的示例都不起作用。我缺少什么？同样，有关完整的 javascript 和标记，请参阅 OP's original example .
最佳答案
将代码放入“就绪”处理程序中:
$(function() {
// all of your current code here
});
jsfiddle 网站会为您执行此操作，除非您告诉它不要这样做。看到左侧的选择下拉菜单，在您选择库的下方，上面写着“onLoad”吗？这意味着 jsfiddle 将您的 JavaScript 包装在窗口的“加载”处理程序中。我的建议是类似的(jsfiddle 选项“on DOM Ready”)。您在代码中得到的内容相当于“Nowrapper - in <head>”，如果您选择该设置并尝试 fiddle ，它将不起作用。
这里发生的事情是，如果您的代码在 HTML 解析到 DOM 之前运行，那么您搜索“#beatles”将找不到任何内容。通过延迟直到 DOM 准备好，您可以确保代码能够找到它需要的元素。
关于javascript - ImageMapper Beatles 演示无法在 jsFiddle 之外运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16133314/