Tag: imagemapster

响应式图像映射调整大于100％的容器: 我正在使用ImageMapster jquery脚本来创建一个imagemap。作者提供了一个小提琴，展示了如何响应地调整图像地图的大小。如果您希望地图占据页面宽度的100％，则可以使用它。但是，如果您在地图周围放置一个边界容器，就像我在下面的示例中所做的那样（使用作者的响应示例），它会大大超出边界框的宽度。（当您查看下面的小提琴时，尝试放大浏览器）。如何更改此resize代码以强制地图不要超过其容器的宽度？常规css max-width不能这样做。小提琴： http ： //jsfiddle.net/jQG48/999/ 这是他用来计算大小的代码： function resize(maxWidth,maxHeight) { var image = $(‘img’), imgWidth = image.width(), imgHeight = image.height(), newWidth=0, newHeight=0; if (imgWidth/maxWidth>imgHeight/maxHeight) { newWidth = maxWidth; } else { newHeight = maxHeight; } image.mapster(‘resize’,newWidth,newHeight,resizeTime); }

ImageMapper Beatles演示不会在jsFiddle之外运行: 这实际上只是一个与ImageMapper jQuery插件相关的javascript问题。我必须重新提出由于问题构建不良以及OP反应不明确而被关闭的问题。但是，我遇到了同样的问题，需要帮助。像之前的OP一样，我试图重现这个jsfiddle： http ： //jsfiddle.net/nYkAG/396/ ，但javascript将无法运行。 OP链接到她尝试使其工作，我的相同。按Ctrl键查看标记/ 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({}, […]

jQuery插件imagemapster没有做任何事情: 我仍然是javascript和jQuery的新手，所以请记住，这可能是一个我看不到的明显解决方案。我引用了jQuery，它适用于其他东西。也许imagemapster引用有问题？我在这里下载了它，我就像这样引用它。我也将“imagemapster.min.js”放入其中，但是当它们都在其中时它不起作用，当它们中的任何一个被它们自己使用时它也不起作用。我阅读文档并几乎完全遵循它（见下文），但它确实没有突出显示。相反，它会弄乱它们的位置，这会破坏页面，这没有任何意义，因为mapster应该与定位无关。可点击区域也已向上移动并偏离位置。它甚至没有任何错误; 代码刚刚通过，除了我所说的，没有任何反应。是的，我想要突出显示的图像映射是完全正常的，＃downstairs，#upstairs和#offices确实是图像标签的ID，就像它们应该是的那样。 $(document).ready(function() { $(‘#downstairs’).mapster({ fillOpacity: 0.5, mapKey: ‘alt’, isSelectable: false, render_highlight: { fillColor: ‘2aff00’ } }); $(‘#upstairs’).mapster({ fillOpacity: 0.5, mapKey: ‘alt’, isSelectable: false, render_highlight: { fillColor: ‘2aff00’ } }); $(‘#offices’).mapster({ fillOpacity: 0.5, mapKey: ‘alt’, isSelectable: false, render_highlight: { fillColor: ‘2aff00’ } }); }); 这是图像和地图的html。他们三个都使用这种格式。