Tag: imagemap

响应式图像映射调整大于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); }

如何通过鼠标hover在另一个映射图像区域上显示小图像和段落？: 这将更好地解释我想要的东西而不是我的文字： http ： //jquery-image-map.ssdtutorials.com/即使该教程可用，但它是在photoshop中使用图像叠加完成的。但我使用jquery插件“jquery.maphilight.js”突出显示我的映射图像。使用它我有一个映射的图像，如果我鼠标hover在图像上，它会突出显示在映射的部分。如果一个人将鼠标hover在特定房间（映射部分），如何显示小图片和段落。这是javascript： $(function () { $(“.mapping”).maphilight(); $(“#mapping”).css(‘visibility’,’hidden’) $(“.hoverable”).css(“border”, “3px solid red”); 这是图像映射的html：

基于搜索文本突出显示图像映射的区域: 这是一个新问题，来自另一个问题，这个问题在这里得到了解答。我正在努力突出显示基于搜索文本的。我们已经完成了，感谢Alex。现在，我正在尝试将相同的概念应用于图像映射上的映射坐标。这里有一个jsfiddle。这是JS（jQuery 1.10.2）…… function doSearch(text) { $(‘#content div’).removeClass(‘highlight’); $(‘#content div:contains(‘ + text + ‘)’).addClass(‘highlight’); }

HTML，jQuery：在图像映射区域上显示文本: 我有一个像这样的图像映射：我使用jQuery将span添加到区域但没有机会在区域上显示任何东西。有没有办法在区域上显示文本，比如工具提示，但没有鼠标hover，加载页面时文本区域？谢谢你的帮助。

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。他们三个都使用这种格式。

如何用鼠标点击绝对定位的图像区域图？: 我使用绝对定位将几个图像放在彼此的顶部。这些图像是部分透明的，并且具有html area和map ，只能使可见部分可点击。在jQuery中，我将鼠标事件附加到area标记。这适用于一个图像：只有在输入图像的映射部分时，mouseenter和mouseleave才会触发。问题是它只适用于顶部图像。对于所有其他人来说，它不会触发事件而不是CSShover工作，因为它上面还有另一个图像。尽管area s不重叠并且map s位于图像前面。以下是该问题的演示： http ： //markv.nl/stack/imgmap2/

如何使用图像映射来显示/隐藏特定的div？: 我有一个图像映射，并希望能够根据我点击的图像映射中的哪个项目显示/隐藏div？ HTML … You clicked the Republic of Texas! jquery到目前为止… $(“#texas”).hide(); $(“???”).click(function(){ $(“#texas”).show(); } 我想我想从地图中抓取“item”标签，或类似的东西，然后用它来知道要显示的div。但是我不确定如何打电话。此外，我甚至不确定这是否是最好的方式，所以任何建议将不胜感激。这是一个小提琴！谢谢！！！

我可以在imagemap区域元素上有一个onclick事件: 我想在一个区域元素上放一个onclick事件。这是我的设置：我尝试了两种不同的方式来进行onclick事件。首先我试过这个： $(“.blue”).click( function(event){ alert(‘test’); }); 我也试过这个： function myFunction() { alert(‘test’); } 以上工作都没有。区域元素是否支持上述元素，或者它们仅支持具有href？提前致谢！

Fancybox图像库: 我想要的是一张图片，点击后打开一个图库。我正在使用FancyBox，我想要Thumbnail Helper（带图像映射）它是这样的： http ： //jsfiddle.net/ffZ7B/343/当你单击左边的weel时，它会打开图库，但它不会显示缩略图。我试过这个： http ： //jsfiddle.net/ffZ7B/344/ 有谁知道怎么做？谢谢！

用于更改区域的JQuery maphighlight根据条件突出显示颜色: 我使用地图坐标创建了图像地图，并且必须突出显示坐标，这是正常工作但我需要的是，更改突出显示颜色取决于条件…在第一个条件中突出显示红色区域然后相同的区域将以第二个条件的黑色突出显示。我可以突出显示相同的区域，但我无法同时更改该区域的颜色。我的示例代码在这里：小提琴演示我试过用 $(document).ready(function () //on page load { $(‘area[title*=”UPPER”]’).each(function ()//get all areas { $(this).addClass(“victory”); }); $(‘area[title*=”LOWER”]’).each(function ()//get all areas { $(this).addClass(“lose”); }); //initialize highlight $(‘.map’).maphilight({ strokeWidth: 0, fillColor: “0000FF”, fillOpacity: 0.8, singleSelect: true }); ////map wrap $(“.victory”).click(function () { //This block is what creates highlighting by trigger the “alwaysOn”, var data = $(this).data(‘maphilight’) […]