Html map 实际使用中遇到的问题及解决方案

前言:百度了一下html map,嗯嗯,介绍的挺详细的,如果是初学者,直接看他们的教程,挺好的,就不用我再多说了。

不过我发现一个问题,就是都是介绍map有什么属性怎么用的,这明显就是照搬文档自己再改一下嘛,难道你们在使用中没遇到什么特别的需求或者什么问题?怎么不写出来?

所以我就不介绍map了,直接说遇到的问题。

问题一:如果图片原始尺寸是900px,但是你展示的尺寸是450px,那map就定位不准了,怎么破?

问题二:如果一个页面有多张图片需要map,怎么做?

一、素材图片:

1、这是一张900px的素材图片,我们要让右下角4个小圆图标可以点击。

二、HTML结构:

1、coords的对应坐标不用变,只需在JS里面改变其比例就OK!

1 <div class="map_img">
2     <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
3     <map name="mapName">
4         <!-- 方形区域写法 -->
5         <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" /> -->
6         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(‘汽车图标‘);" alt=""/>
7     </map>
8 </div>

2、如果有多张图片,一张图片对应一个map,class不用变,改变map的name值和对应的usemap值就好。name=usemap他们俩是一对CP哦,不要分开它们,给他们一样的值。

 1 <div class="map_img">
 2     <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
 3     <map name="mapName">
 4         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(‘汽车图标‘);" alt=""/>
 5     </map>
 6     <!-- 一张图片对应一个name和usemap -->
 7     <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style="width: 450px">
 8     <map name="mapName2">
 9         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(‘第二张图的汽车图标‘);" alt=""/>
10     </map>
11 </div>

三、样式表:

  !@#¥%……&*?(404)

四、JS设置图片的比例:( 记得引用jquery: <script src=‘http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js‘></script> )

 1 // 设置 图片热点区域
 2 function set_map() {
 3     var mapD = $(‘area‘); //获取页面所有的热点区域
 4     var imgW = $(‘.mapImg‘)[0].naturalWidth || 900; //图片原始尺寸
 5     var imgW01 = $(‘.mapImg‘)[0].innerWidth || 450; //图片现在尺寸
 6     var Multiple = imgW01 / imgW; //对应比例
 7     var _arrS = ‘‘; //存放coords的值
 8     var _arr = []; //存放coords对应的值
 9     for (var i = 0; i < mapD.length; i++) { //热点区域的个数
10         _arr = [];
11         _arrS = $(mapD[i]).attr(‘coords‘);
12         _arr = _arrS.split(‘,‘);
13         //coords值的个数,圆形为3个,方形为4个
14         for (var j = 0; j < _arr.length; j++) {
15             _arr[j] = _arr[j] * Multiple;
16         }
17         _arrS = _arr.join(‘,‘);
18         // 把缩放比例后对应的coords,赋值给原有coords
19         $(mapD[i]).attr(‘coords‘,_arrS);
20     }
21 }
22 set_map();

五、总结:

细心的童鞋就会发现,为什么别人给图片都是加ID而我却加class,原因是为了方便多张缩放过的图片使用map定位。额...... 多读几遍就懂!

六、课后作业:

把剩余的三个小圆图标的坐标标出来,并测试没问题?(提示:用PS的 矩形选框工具+信息 可以很容易就找到对应的坐标)

时间: 2024-11-08 21:50:42

Html map 实际使用中遇到的问题及解决方案的相关文章

ueditor使用中遇到的问题和解决方案

ueditor的是百度推出的一款在线编辑组件,功能很强大.所以引入到工具平台中来,大家可以自己做一些笔记或记录. 1.点击单图片上传按钮无反应: 在ueditor.config.js var URL = window.UEDITOR_HOME_URL || getUEBasePath(); //console && console.error("***URL***:"+URL); /** * 配置项主体.注意,此处所有涉及到路径的配置别遗漏URL变量. */ windo

spring 持久层框架的使用中遇到的一些问题解决方案汇总

1.解决Mybatis有查询结果,但存不进实体类的问题(通用Mapper也是一样的) 原文地址:https://www.cnblogs.com/lkc9/p/11737304.html

【Go语言】map在goroutine通信中的使用

简介 本篇文章的主要内容是解决go语言map在使用中遇到的两个问题 一.cannot assign to struct field https://haobook.readthedocs.io/zh_CN/latest/periodical/201611/zhangan.html 二.fatal error:concurrent map read and map write https://blog.csdn.net/skh2015java/article/details/60334091 原文

怎么在map上显示自己的位置

============问题描述============ RT,已经能获取到自己位置的坐标了,不知道怎么在map上添加图标,十分感谢 ============解决方案1============ arcgis大概如下: GraphicsLayer graphicsLayer = new GraphicsLayer(); mapView.addLayer(graphicsLayer); Point  loc= new Point(120.8664698600769,36.14800174970085

map和json之间的转换

Action中在session中存放了一个map<String,Object>,跳转到a.jsp,a.jsp通过form提交到BAction,BAction可从session中获得map值. 但是由于session是存放在tomcat的memcached中的,存放大对象会影响用户使用,同时,如果将map放到request中,通过hidden传递,页面之间传递map有问题. 故想到一个解决方案是将map转为json,存储到request中,a.jsp中写入hidden,最后在BAction中获取

python之路-Day4

本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pascal中叫做procedure(过程)和function,在C中只有function,在Java里面叫做method. 定义:

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

Automapper扩展方法

问题描述 系统中实现了一个自定义的PagedList /// <summary> /// Paged list interface /// </summary> public interface IPagedList { int PageIndex { get; } int PageSize { get; } int TotalCount { get; } int TotalPages { get; } bool HasPreviousPage { get; } bool HasN

微软首席架构师Yaniv Pessach谈微软大数据COSMOS(中文意思是宇宙)

微软首席架构师Yaniv Pessach谈微软大数据COSMOS(中文意思是宇宙) 参考:http://www.quora.com/Distributed-Systems/What-is-Microsofts-Cosmos 宇宙是微软内部大数据分析平台. COSMOS宇宙是由分布式计算组件(有点相当于Hadoop的Map/Reduce了使用微软Dryad的解决方案,它(不像的map-reduce)允许计算任意DAG. COSMOS宇宙支持类似SQL的语法(类似于HIVE/PIG),包括分布式存储