标签: imagemap

我一直在处理一个响应式网站,并且在图像映射方面遇到了一些问题.似乎图像映射不适用于基于百分比的坐标.经过一番谷歌搜索后,我找到了一个JS解决方法 - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.但是,我希望该网站与JS禁用.

因此,在耗尽了这些可能性后,我决定研究在图像上使用相对定位的Anchor标签来做同样的事情.无论如何,这是一个更好的选择IMO.我试图将锚标记放在图像上,基于百分比的位置和大小,但每当我重新缩放浏览器时,锚标记都会不成比例地移动到图像上.

HTML:

<div id="block">
  <div>
    <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
  </div>
  <a href="#" class="one"></a>
  <a href="#" class="two"></a>
</div>

CSS:

#block img {
  max-width: 100%;
  display: inline-block;
}

a.one{ 
  height:28%;
  width:19%;
  top:-36%;
  left:1%;
  position:relative;
  display:block;
}
a.two{
  height:28%;
  width:19%;
  top:37%;
  left:36%;
  position:absolute;
}

这是一个jsFiddle来描述我的意思 - http://jsfiddle.net/wAf3b/10/.当我调整HTML框的大小时,一切都变得歪曲.

任何帮助非常感谢.

让我们说我们有一个人体的图像,我想当用户将鼠标悬停在身体​​的一部分(头部,手臂等)上时,这个器官变成绿色,当他点击一个定义的动作时.

它是否可以使用JavaScript？如果是这样的概念是什么？

提问的理由:

目标: 这只是用户输入他的病史的现有项目的一小部分,所以我想要给他一个所有器官的下拉菜单,只显示一个人的模型,他点击并保存他的轨迹等历史.

要做到这一点,我想我需要一个人体图像,并定义在这个图像上表示的每个器官的XY边界,并给它一些属性(名称).

1. 用户悬停:器官显示的边界和bg的颜色例如是绿色
2. 当用户点击它时,调用该对象表单.

在js-jquery中是否存在类似的东西？或者我需要发明轮子？

自从我不得不做Image Mapping以来已经很久了!可能像4-5岁.

我最后一次使用标签和为多边形形状创建标签来实现这一目标.这当然有效,并且仍然支持html,即使在HTML5中也是如此.问题是,这仍然是图像映射的好方法吗？或者我应该废弃这个方向,并打算使用Canvas或SVG技术？

决定有几个因素:

• 客户端使用IE7,因此解决方案必须与IE7和IE8一起使用,因此我想不使用SVG或Canvas,我想使用旧的学校地图标签会更容易,至少它可以轻松地在所有平台上工作.
• 地图有相当自定义的样式(围绕区域的笔划也有差距)
• 每个区域都有一个翻转状态,弹出窗口的内容对每个区域都是唯一的.这必须通过JS来实现.使用JS使用map标签与地图的DOM结构交互是否有任何问题？
• 这不是必需的,但我会使地图对视口有所反应.

坦率地使用标签感觉真的很老,过时和肮脏.但是,说实话,这似乎是最合适的解决方案.每个人都在想什么？

任何反馈欢迎,

谢谢,克雷格

在我的应用程序中,我有黑/白原理图,右下角有一个标题栏.标题栏有几个框(矩形),我需要找到每个矩形的角的坐标.请注意,在我的应用程序中,不存在噪音,并且所有边缘都是完全笔直的(0度和90度).我应该使用什么技术来找到每个角落的像素位置？由于这些图像的简单性,我希望避免像Hough这样的变换

这是一个示例:

我有一张需要拆分为4的图片,每个部分都必须有一个链接.人们还在使用图像热点吗？

我对javascript和jQuery还是比较陌生，因此请记住，这可能是我看不到的明显解决方案。

我引用了jQuery，它在其他方面也很好用。也许imagemapster参考存在问题？我在这里下载了它，并引用了它。我也放入了“ imagemapster.min.js”，但是当两个都放在里面时它不起作用，或者当两个都被自己使用时它就不起作用。

<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.js"></script>
<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.min.js"></script>

我阅读了文档并几乎完全遵循了该文档（请参见下文），但实际上对突出显示没有任何作用。相反，它会使他们的定位有些混乱，这会破坏页面，这是没有意义的，因为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。他们三个都使用这种格式。

<div style="position:static;left:0px;top:0px">
<img id="downstairs" alt="downstairs" class="map" usemap="#downmap" style="visibility:visible;z-index:3; left: 10px; top: 54px;"
    src="sourceHere" width="1000" />
<map name="downmap" id="downmap">
    <!-- There is a large …

我只是html的初学者，我想为我的图像贴图添加悬停效果。我已经搜索了很多解决方案，但是我只使用我不理解的脚本提出了解决方案。

该脚本如何工作？我尝试使用

area:hover {
border: 1px solid white;
}

但这行不通。

我想为图像映射中定义的每个区域显示不同的工具提示内容.是否有任何jQuery插件具有非常适合与图像映射一起使用的API？我希望它在工具提示内容的来源方面也是灵活的,例如,内容可能包含在不可见iframe的锚元素中,或者它可能来自数据库.

谢谢

我有一个带有HTML的大图像<map>,我想跳转到该图像上的特定区域.我用<area />标签来标记位置

看看代码:

<img src="demo_files/k3.png" id="target" alt="Map" usemap="#powerpuffgirls" />
<map name="powerpuffgirls">
    <area shape="rect" coords="624,137,671,167" href="#" id="ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
    <area shape="rect" coords="99,2685,161,2723" href="#" name="ppg1" title="The Powerpuff Gidrls" alt="The Powerpuff sGirls" />
</map>

但是,我无法移动到图像上的任何区域.

编辑:移动到图像的特定区域的任何其他方法将是伟大的!

Hitbox Overlay IIFE Code

//CSS Hitbox Solution 08-26-2015
//StackOverflow - https://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input
//Detect MouseOver https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
//Source: https://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
(function($) {
  $.mlp = {
    x: 0,
    y: 0
  }; // Mouse Last Position
  function documentHandler() {
    var $current = this === document ? $(this) : $(this).contents();
    $current.mousemove(function(e) {
      jQuery.mlp = {
        x: e.pageX,
        y: e.pageY
      };
    });
    $current.find("iframe").load(documentHandler);
  }
  $(documentHandler);
  $.fn.ismouseover = function(overThis) {
    var result = false;
    this.eq(0).each(function() {
      var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
      var offset = $current.offset(); …