我在响应式html布局中有一个现有的图像映射.图像根据浏览器大小进行缩放,但图像坐标显然是固定的像素大小.我有什么选项来调整图像地图坐标的大小？
人们仍然使用旧的HTML图像地图吗？那些:
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
还是有更新,更好的选择？
我有一个复杂的背景图像,有很多小区域需要翻转图高亮,以及每个区域的附加文本显示和相关链接.最后的插图使用z-index堆叠了几个具有透明度的静态图像,并且高亮翻转插图需要在中间的"三明治"层之一中显示以实现期望的效果.
在一些不成功的摆弄块后,我决定这可能是用旧式的图像映射完成的.我制作了一个带有四个几何形状轮廓的示意性测试图,并使用png翻转"填充"它们.我们的想法是将图像映射与底部背景图层相关联,使用css {visibility:hidden}初始化所有翻转,并使用Jquery的悬停方法使它们可见,并在单独的div中显示相关文本.单独的文本函数是我没有尝试使用:hover pseudoclass而不是jQuery hover的原因.因为我正在使用图像映射,所以我将所有翻转png(具有透明背景)的大小设置为整个容器以进行精确放置,因此所有内容都准确排列.
我得到了什么......不是真的!正确映射图像映射以仅激活几何区域.但是每个翻转区域的href只是间歇性地工作,并且使用带有css可见性的Jquery悬停是混乱的.期望的行为是滚入该区域只会使形状变得坚固.实际发生的是,形状内的任何运动都可以在可见和隐藏之间快速切换; 当光标在形状内停止时,它可能是可见的,也可能不是.任何想法赞赏!
样本悬停设置(我最终会使用数组进行实际翻转,相关链接和文本):
$('#triangle').hover(
function() {
$('#ID_triangle').css({'visibility' : 'visible'});
},
function() {
$('#ID_triangle').css({'visibility' : 'hidden'});
}
)
图像地图:
<div id="container">
<img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
<map name="testMap">
<area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
<area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
<area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
<area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
</map>
<img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
<img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
<img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" …我有一个大图像,我想让图像的某些部分可点击.我还想指定可点击区域的形状(方形,圆形,自定义).如果不依赖Javascript,我如何使用CSS和HTML来创建交互式图像映射？具有可靠的"热点"并突出显示区域而不依赖于生成SVG坐标.我用谷歌找到的所有在线图像地图生成器都没有提供我认为的任何图像工具的标准基本功能.
我正在尝试创建一个交互式地图,用户可以在地图中点击不同的省份以获取该省的特定信息.
示例:http: //www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/
到目前为止,我只发现功能有限的解决方案.我只是使用SVG文件搜索过这个,但是如果可能的话,我会对其他文件类型开放.
如果有人知道一个完全功能的方法(jQuery插件,PHP脚本,矢量图像)或如何手动执行它的教程请分享.
我正在设计一个GUI远程控制,但我没有为每个远程按钮制作单独的按钮,而是希望获得一个完整的就绪远程图像并设置它的某些部分可点击.有没有办法而不是动作事件呢？
我想在一个区域元素上放一个onclick事件.这是我的设置:
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>
我尝试了2种不同的方法来进行onclick事件.首先我试过这个:
$(".blue").click( function(event){
alert('test');
});
我也试过这个:
function myFunction() {
alert('test');
}
以上工作都没有.区域元素是否支持上述,或者它们仅支持具有href？
提前致谢!
我正在使用ImageMapster 这里创建一个图像映射.
我创建了一个photoshop图像,其中包含我从原始照片中剪下的几张图像.每个图像都在一个单独的图层上.
现在,我需要获取每个对象的路径坐标,我不想将鼠标悬停在每个角落上并手动记下每个坐标.
是否有自动获取此路径的方法？
也许有一些应用程序或Web服务,我可以发送我的图像并获得回报的路径？
我已经尝试分别导出每个图层,然后将它们导入到插图画家并矢量化形状(它将形状保持在原始位置),但我无法弄清楚如何将坐标路径作为文本.我可以将它导出到svg,但这不是css图像映射所需的简单代码.
有没有办法为HTML <area>元素设置背景颜色？我正在创建一个图像地图,当你将鼠标放在它们上面时,地图的某些部分会弹出一个工具提示,我认为如果我可以为<area>元素设置背景颜色那么你会看到很酷(也很方便)它们位于图像上方.
我尝试了背景颜色和边框,但都没有任何效果 - <area>元素仍然是"看不见的".我假设这是因为它<area>是一个自动关闭的标签,所以它实际上没有任何尺寸？但强迫高度和宽度也无济于事.