精华内容
下载资源
问答
  • 图像映射 usemap

    2021-06-04 20:58:30
    img src="图像地址" usemap="#映射图像名称"> <map name="映射图像名称" id="映射图像名称"> <area shape="热区形状1" coords="热区坐标1" href="URL1"> <area shape="热区形状2" coords="热区...
    1. 基本语法
    <img src="图像地址" usemap="#映射图像名称">
    <map name="映射图像名称" id="映射图像名称">
      <area shape="热区形状1" coords="热区坐标1" href="URL1">
      <area shape="热区形状2" coords="热区坐标2" href="URL2">
    </map>
    
    1. 属性
    • usemap 属性将图像定义为客户端图像映射。
    • 图像映射指的是带有可单击区域的图像。
    • usemap 属性与 map 标记的 name 或 id 属性相关联,usemap 属性值以“#”开始,后面紧跟“映射图像的名称”,以建立 img 标记与 map 标记之间的关系。它指向特殊的 map 区域。
    • map 标记是成对标记,name 或 id 属性映射图像的名称,与 img 标记的usemap 属性值关联。
    • area 标记是单标记,定义图像映射中的区域。area 标记总是嵌套在 map 标记中。area 标记有三个属性,分别是 shape、coords、href。href 定义此区域的目标URL,shape 和 coords 属性值如下表:
    属性属性值说明
    shaperect矩形区域
    circle圆形区域
    poly多边形区域
    coordsx1,y1,x2,y2矩形左上角和右下角的顶点坐标
    center-x,center-y,radius圆心和半径
    x1,y1,x2,y2,...xn,yn,x1,y1各顶点坐标,首尾坐标相同,形成封闭图形
    1. 举例
    <body>
      <p>请点击图像上的星球,把它们放大。</p>
      <img src="planets.jpg" usemap="#planetmap" alt="Planets" />
      <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" />
      </map>
    </body>
    
    展开全文
  • 值 描述 alt text 必需,图像替换文本 src URL 必需,图像的URL height pixels/% 图像宽度 weight pixels/% 图像高度 usemap URL 将图像定义为客户器端的图像映射 border pixels 图像边框 title text 图像的提示文本...
    图像标签
    标签描述
    <img>定义图像
    <map>定义带有可单击区域的图像映射
    <area>定义图像地图中的可单击区域
    <figure>定义媒介内容的分组,以及他们的标题
    <figcaption>定义figure元素的标题

    <img>是一个空元素(单标签),以下是<img>图像标签的属性:

    <img >标签的属性
    属性描述
    alttext必需,图像替换文本
    srcURL必需,图像的URL
    heightpixels/%图像宽度
    weightpixels/%图像高度
    usemapURL将图像定义为客户器端的图像映射
    borderpixels图像边框
    titletext图像的提示文本

    Ismap    将图像定义为服务端的图像映射

    只讲一下红色的重点,因为以前学DW的时候用过图像地图做链接现在说一下原理。

    <img> 标签的 ismap 和 usemap 属性告诉浏览器这个图像是一个特殊的可视映射,可以通过鼠标来对一个或多个超链接进行选择,也就是通常所说的图像映射(image map)。

    什么是图像映射:图像映射是一个能对链接指示做出反应的图形或文本框。单击该图形或文本框的已定区域,可转到与该区域相链接的目标(URL)。简单的说图像映射就是在一幅图中定义若干个区域(热点),每个区域中指定一个不同的超链接,当单击不同的区域时将会跳转到不同的超链接。

    图像映射分两种类型:1、在从Internet装入图形的客户机上进行处理的,称为客户器端图像映射。

    2、在向Internet提供的HTML页面的服务器计算机上进行处理的,称为服务端图像映射。

    引用:

    图像映射的 ismap 样式被称为 “服务器端”图像映射,它只可以用在 <a> 标签标识的超链接里面。

    请看下面的例子:

    <a href="/example/map">
      <img src="/i/map.gif" ismap="ismap" />
    </a>
    

    当用户在 ismap 图像上单击了某处时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。特殊的服务器端软件(在本例中是 /example/map 程序)可以根据这些坐标来做出响应。

    <map>标签的属性
    属性描述
    idunique_name为map标签定义唯一的名称
    namemapname为 image-map 规定的名称。

    <area>标签的属性也有很多,主要是定义划分区域(热点)的形状,以及定义超链接

    <map>标签和<area>标签用于创建图像地图。说白了就是<map>定义可单击区域<area>的图像映射

    <map>元素必须使用name属性定义image-map的名称,而image-map这个属性与<img>标签的usemap属性相关联,创建图像与映射之间的关系。

     

    usemap 属性的值是一个 URL,它指向特殊的 <map> 区域。usemap就是给图像地图一个名称,图像地图的name属性使用这个名称,从而他们建立了图像和映射之间的关系。

    好奇为什么URL不是统一资源定位符吗,为什么不写网址?所以在前面加一个#才能解释得通吧,代表空的? 看起来真的特别像书签,因为好像很早以前name好像也可以用来做锚。

    就暂且这么理解吧如果有大佬能解释欢迎指正,查了很多基本上查不到,也看了w3c的解释,强行理解哈哈哈哈哈哈哈哈哈

     本来刚开始脑子想通了,写到后面发现不知道怎么组织语言了好玩了,睡觉了。

    展开全文
  • img使用usemap时快速获取锚点坐标 Img使用usemap <map name="mapName"> <area shape="rect" coords="65,60,251,117" href="sun.htm" alt=""> <area shape="rect" coords="300,60,487,117" href=...

    img使用usemap时快速获取锚点坐标

    Img使用usemap

    <map name="mapName">
          <area shape="rect" coords="65,60,251,117" href="sun.htm" alt="">
          <area shape="rect" coords="300,60,487,117" href="sun.htm" alt="">
          <area shape="rect" coords="100,135,205,155" href="sun.htm" alt="">
          <area shape="rect" coords="350,130,430,155" href="sun.htm" alt="">
    </map>
    <img src="imageUrl" alt="" usemap="#mapName">
    

    锚点获取

    打开开发者工具,确保jQuery可以使用,输入如下代码

    $(document).mousemove(function(e){
      deal(e);
    });
    deal = (e)=>console.log(e.offsetX + ":" + e.offsetY);
    

    鼠标在图片上移动,控制台会打印出相对于图片左上角的位置左边

    76:67
    76:66
    75:65
    73:65
    72:65
    70:64
    69:64
    68:64
    64:61
    
    展开全文
  • img src="china.gif" usemap="#mymap"> <map name="mymap"> <area shape="rect" href="a.html" coords="0,0,50,50"> <area shape="circle" href="b.html" coords="120,80,50"> <area ...

    [html] html如何创建图片热区(img usemap)?

      <img src="china.gif" usemap="#mymap">
        <map name="mymap">
         <area shape="rect" href="a.html" coords="0,0,50,50">
         <area shape="circle" href="b.html" coords="120,80,50">
         <area shape="poly" href="c.html" coords="0,0,50,50,100,100,200,200">
        </map>
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • html给图片各区域加功能(img usemap)

    千次阅读 2019-08-13 17:30:53
    img src="planets.gif" alt="Planets" usemap="#planetmap" /> <map name="planetmap" id="planetmap"> <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a> &...
  • HTML 图片热区(img usemap

    千次阅读 2017-02-13 14:27:58
    <img> element ‘s attribute: usemap MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img The partial URL (starting with ‘#’) of an image map associated with the element. ...
  • Usemap 。  RenderMode.RawImage :优点是不需要文件缓存,但缺点是每个图形必须有它自己的aspx页,是与你所显示的网页分开的。   RenderMode.ImageTag :不需要为每一个单独图形建立一个独立的网页。缺点则...
  • 原文地址:图解img标签的usemap使用作者:刘超 各位在看这篇文章之前请先到w3school来了解一下标签中的usemap属性是什么: http://www.w3school.com.cn/tags/att_img_usemap.asp   在有些概念之后,文章将要开始...
  • #资源达人分享计划#
  • Warcraft3_UseMap01:라이브러리작성중
  • USEMAP的用法

    千次阅读 2014-05-06 09:21:51
    usemap是标签的一个属性,用作指明所使用的图像地图名。  后面的#Map的Map就是用标签定义的一个图像地图,它的name属性是Map,像下面这样定义:        ...    使用时:    图像地图把一幅图像分成...
  • <img usemap="#Map">的用法

    2014-07-15 08:22:07
     <td><img src="images/index.jpg" width="1002" height="975" border="0" usemap="#Map" /> ,390,928,492" href="hbds.html" /> ,524,705,726" href="xinwen.html" /> ,782,924,881" href=...
  • img 标签的 usemap 属性

    2017-01-08 14:38:00
    img src="1.gif" alt="Planets" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="11,10,180,180" href="detail/Best_marketing.html"> <area shape="rect" coords="198,13,3...
  • JS usemap的用法

    2016-11-24 14:01:03
    这就是usemap的用法. 什么是usemap呢?usemap是标签的一个属性,用作指明所使用的图像地图名。 知道了了usemap是什么,我们还要知道它的属性,这样用起来才得心应手. area在这是区域的意思。在这个map中我们设置了5...
  • 1.利用img 的usemap属性,利用usemap对应到map的name或者id。 2.并在map标签里面嵌套多个area标签。 3.不同的area里面的href 属性 以及相对于图像原点(0,0)的coords 属性不一致,可以实现不同区域定位到不同的...
  • usemap做一个图片识别

    千次阅读 2016-06-22 10:46:38
    usemap来做一个图片识别验证码 效果usemap用法介绍 usemap 属性提供了一种“客户端”的图像映射机制. 他可以将一个图片在网页中更具用户的map 划一个区域area来表示逻辑映射。 这个area有以下属性: shape=”...
  • Usemap的用法

    2010-07-28 22:09:00
    usemap是标签的一个属性,用作指明所使用的图像地图名。 后面的#Map的Map就是用标签定义的一个图像地图,它的name属性是Map,像下面这样定义: <map name="Map"> <area shape=rect coods=...
  • HTML <img> 标签的 usemap 属性

    千次阅读 2013-11-02 14:19:47
    usemap 属性将图像定义为客户端图像映射。 图像映射指的是带有可点击区域的图像。 usemap 属性与 标签" href="http://www.w3school.com.cn/tags/tag_map.asp"> 元素的 name 或 id 属性相关联,以建立 与 之间的关系...
  • (1)使用 usemap 可以将把鼠标在图像上单击时的坐标转换成特定的行为,包括加载和显示另外一个文档。 (2)使用 img 元素的 usemap 属性可以实现单击图片上的特定区域时跳转到特定地址。 (3)usemap 属性将图像...
  • 标签的 ismap 和 usemap 属性告诉浏览器这个图像是一个特殊的可视映射,可以通过鼠标来对一个或多个超链接进行选择,也就是通常所说的图像映射(image map)。  ismap 属性  图像映射的 ismap ...
  • 例子: IMG usemap="#Map" alt="" src="/images/banbian.jpg"> map name="Map" id="Map"> area shape="rect" coords="200,50,300,70" href="/swt/" /> area shape="rect" coords="180,
  • 所以USEMAP的坐标错位 http://files.cnblogs.com/files/jweb/jquery.rwdImageMaps.min.js <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&...
  • 详细内容见http://www.w3school.com.cn/tags/att_img_usemap.asp ...其中usemap中coords="788,43,917,67"是指左上角的坐标和右下角的坐标。 例:    http://www.2909999.com/swt/" target="_blank" />
  • <img src="http://w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> ,139,14" href="http://w3school.com.cn/example/html/venus.html" target="_blank" alt="Venus"></area>...
  • img标签的usemap的用法

    2014-06-15 13:43:53
    <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> ,139,14" onMouseOver="writeText('直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星...
  • <img class="changeOutHTML" src="/servlet/DisplayChart?filename=jfreechart-5656490627055919439.png" width="600" height="600" border=0 usemap="#jfreechart-5656490627055919439.png"> 问题:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,271
精华内容 2,908
关键字:

usemap