我的网站广泛使用图像映射.这些图像来自中世纪手稿的页面.AREA标签的mouseOver事件附有一个工具提示,它显示了鼠标悬停在其上的线条的古代脚本的现代印刷转录.
我刚刚在Apple商店的iPad上查看了我的网站.iPad在许多方面都是使用的乐趣,但是,我想知道Apple将鼠标事件映射到手指触摸事件.Apple可能有充分的理由像他们一样做事,但他们的选择似乎违反直觉并且对我来说过于复杂.
具体来说,iPad Safari浏览器显然是以不同的方式响应fingerDown和fingerTap.当我点击图像映射的某个区域时,显示连接到AREA标记的鼠标悬停事件的工具提示,并且在我点击其他地方之前一直保持可见状态.当我将手指放在图像地图的某个区域上时,该区域会改变颜色.因此,如果iPad Safari检测到mouseOver事件处理程序,它会在点击时执行mouseOver代码并显然阻止"click"事件传播,这样如果你还有一些连接到click事件的东西,它就不起作用了？是对的吗？
但更重要的是,为什么不将mouseDver的iPad-Safari对应的fingerDown？映射mouseOver事件时,FingerDown似乎比Tap更可能是候选者.我希望以这种方式映射事物:
MouseClick : FingerTap (i.e. finger down and then immediately up)
MouseOver : FingerDown (finger down and stays on the spot)
如果Apple将fingerDown视为mouseOver的对应物,那么工具提示可以显示在FingerDown上,并在fingerUp上再次隐藏,这将与mouseOut相对应.
也许有人可以启发我关于导致Apple进行这些特定的鼠标触摸事件映射的思维过程？谢谢
我使用绝对定位将几个图像放在彼此的顶部.这些图像是部分透明的,并且具有html area并且map仅使可见部分可点击.在jQuery中,我将鼠标事件附加到area标签上.
这适用于一个图像:只有在输入图像的映射部分时才会触发mouseenter和mouseleave.
问题是它只适用于顶部图像.对于所有其他人来说,它不会触发事件而不是CSS悬停工作,因为它上面还有另一个图像.尽管事实上areas不重叠并且maps在图像的前面.
以下是该问题的演示:http://markv.nl/stack/imgmap2/
我想知道如何为类似于此图像的地图标记和编码悬停效果.
当每个区(或部分)被鼠标悬停/触摸/点击时,我需要更改它的颜色而不影响任何其他部分.每个部分的边界必须代表图像,不应该是正方形.该解决方案无法使用canvas,因为我正在使用的网站必须可以在旧浏览器中使用(我个人已经内脏了.)
理想情况下,我想用CSS做这个,而不使用太多的JavaScript或大量的图像.有没有人这样做过？
编辑:我知道人们建议<area>标签,但AFAIK,它不接受:hover伪类.
编辑2:我可能会用这个:http://www.netzgesta.de/mapper/
请注意:
这个问题与我在stackoverflow上发现的问题非常相似.
Google Maps v3 ImageMapType防止环绕
但是,上面的问题和答案对我的示例/问题不起作用,因为我需要能够在任何缩放级别查看我的所有图像,更重要的是我需要绘图工具才能正常工作.
我的场景:
我有一个自定义谷歌地图使用ImageMapType,它也有DrawingManager图书馆和工具.
我的问题:
乍一看,所有工作都很顺利,但是如果您要绘制任何标记或多边形,然后平移地图,则标记/多边形会重复或在视图中的地图区域内移动.
在地图上绘制大多边形时会出现同样的问题,因为在绘制多边形时,您会注意到正在绘制的线将突然捕捉到多边形的错误边.
我的问题:
如何防止包装问题,以便所有标记不会移动或复制,以便绘图工具无需捕捉到多边形的另一面？
在线示例:
http://jsbin.com/ecujug/5/edit#javascript,live
问题视频:
https://dl.dropbox.com/u/14037764/Development/stackoverflow/map-drawing/issue.html
期望的效果:
我想要一个由坐标定义的图像的活动链接部分周围的边框.我目前已经实现了这样的程度:当用户点击时,通过使用:outline-color,可以看到轮廓,这要归功于href.我需要一个默认指定坐标周围的边框.我对CSS不是很有经验,所以一些指导意见将不胜感激.如果我需要在相应的时间间隔标记它.使用javascript会是一个好习惯吗？
<!DOCTYPE html>
<html>
<style>
img[usemap], map area[shape]{
outline-color: #F00;
}
</style>
<body>
<img src="unnamed.png" usemap="#mark">
<map name="mark">
<area shape="rect" coords="10,10,50,50" href="#">
</map>
我想在我的网页上为图像地图添加自动区域突出显示.我发现mapper.js库对于实现这一点非常有用,但是在区域地图周围创建x,y图非常耗时.
有没有快速的方法来创建不规则多边形的边界坐标,例如可以在区域地图上找到？
编辑
必须有一种方法来做到这一点.我的Windows PC上有Fireworks 8以及photoshop CS3,但我对Fireworks更熟悉.
如果我创建一个选框,我可以右键单击>修改选框>转换为路径.这创造了一个带有几个点的路径,但我不知道如何进入下一步,即提取这些点的坐标.
我试过插入一个热点,一个多边形切片,然后导出到"html和图像".这两个都给我方形热点,而不是多边形.我也尝试右键单击路径和编辑>复制路径轮廓,以及编辑>复制Html代码.也不给我多边形坐标.
我只能为切片获得多边形坐标.有没有办法将路径转换为Fireworks 8中的切片？
我目前正在对谷歌地图API V3在这里
如果您在21到23之间缩放,地图上将会有一个图像叠加层.图像需要很长时间才能加载,我决定将其分解成不同的图块以便于加载.我正在使用自动瓷砖切割机将图像切割成瓷砖.
我的脚本有问题;
var OrgX = 31551; // the Google Maps X value of the tile at the top left corner of your Photoshop document
var OrgY = 50899; // the Google Maps Y value of the tile at the top left corner of your Photoshop document
第一个问题如何从photoshop文档中找到X和Y的值？
如果我设法解决第一个问题,那就说吧.
第二个问题以下代码是否正确显示瓷砖取决于缩放级别？或者我错过了任何代码？
var BuildingsLayer = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
},
tileSize: new …这个问题比技术问题更具哲学性.
当Web开发人员被称为网站管理员并且我选择的工具是FrontPage,然后转移到Evrsoft 1st Page 2000时,我已经将自己培训成为Web开发人员.
这是我最后一次使用HTML图像映射.
现在它是HTML5,AJAX,矢量画布,CSS 3D,jQuery,本地存储,触摸屏Safari,你的名字.图像地图已经逐渐消失,甚至谷歌都没有提出太多相关结果; 2004年强制性的W3C学校入学和一些论坛帖子.
显然,使用图像地图创建网站导航或类似的琐碎是一个坏主意,当今它肯定是不可原谅的.
但是现在我有一个任务是在带有背景图像的div上创建一个多边形可点击区域.
我在图像映射中没有这个问题,因为它看起来像是为这样的用例设计的,虽然我没有完成任何测试,但我无法想象任何浏览器都会丢弃对一个工作得很漂亮的元素的支持多年.但我不禁想到今天必须有更好的方法来做到这一点.
我的网站创建理念是为IE5.5开发,然后为Chrome边缘设计.这意味着即使是最古老的浏览器,该站点首先需要在基本级别上工作,然后开始添加JS和CSS以使其更美观,更实用,更快速,更简单,更友好和更好.
因此,虽然我知道我可以在Raphaël中做一个画布并添加各种时髦的悬停效果和事物,但我认为制作简单的功能不应该需要一个89 kb(或X kb)的JS库.或者甚至是JS.
我不知道CSS3是否具有定义多边形区域的能力,但是虽然认识到CSS3引入的巨大可能性,但我更喜欢将那里定义的任何内容保持为非必要的天赋,这些天赋会优雅地降级.
因此,在今天的webdev世界中,最流行的浏览器方式是定义多边形点击区域(最好是以jQuery .hover(),或者至少是CSS可以获取的方式:hover),这种方式不依赖于可用的JavaScript或CSS属性在少数浏览器？图像映射真的是唯一的方法吗？什么是移动设备？
我找不到IMAGE MAPS和CSS SPRITES之间的明显区别.两者看起来都像将页面中的图像合并为一个？因此我们可以减少对服务器的多个请求.那真正的区别是什么？
有一个奇怪的问题,IE不想在我的HTML中遵守SVG的视图框大小.
viewBox="0 0 1000 563"
它适用于我尝试的所有其他浏览器,但在Windows上的IE上失败(我运行Win 8.1 w/IE 11.0).它似乎在Win10上的IE/Edge上工作,即使在IE <11兼容模式下也是如此.
我真的不明白如何解决这个问题,但我已经读过IE确实有查看框和大小的问题.但我找不到办法解决它.
如果有人有任何想法我可以解决这个问题,那么请告诉我.
以下是有问题的代码,以及2个显示正确(firefox)和错误呈现(IE)的打印屏幕.
码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
<image class="trinn2" width="100%" height="100%" xlink:href="http://dummy.url"></image>
<a xlink:href="http://dummy.url">
<path class=" poly " d="M718,467 L714,414 L656,412 L658,468 Z" id="poly_7557"></path>
</a>
<a xlink:href="http://dummy.url">
<path class=" poly " d="M588,468 L656,465 L656,411 L585,410 Z" id="poly_7559"></path>
</a>
<a xlink:href="http://dummy.url">
<path class=" poly " d="M484,410 L484,472 L586,468 L586,410 Z" id="poly_7560"></path></a><path class=" solgt poly " d="" id="poly_7561"></path>
<a xlink:href="http://dummy.url">
<path class=" poly " d="M846,369 L849,417 L789,416 …