精华内容
下载资源
问答
  • 它还有个usemap属性很有意思。 看看51ditu首页中有一个地图,中部有个中国地图。点击右键下载下来看下就是一个普通的图片。 但点击地图上的省份却可以出发不同的事件(或打开不同的链接),很有意思。原来是使用了...
  • MapContext and useMap hook

    2020-12-26 20:44:06
    <p>This introduces the <code>MapContext</code> and the <code>useMap</code> hook. <p>It is a replacement for the <code>MapProvider</code> (which is now marked as deprecated) and the <code>mappify...
  • JS usemap的用法

    2016-11-24 14:01:03
    这就是usemap的用法. 什么是usemap呢?usemap是标签的一个属性,用作指明所使用的图像地图名。 知道了了usemap是什么,我们还要知道它的属性,这样用起来才得心应手. area在这是区域的意思。在这个map中我们设置了5...

    <body>
    <table width="1002" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="images/index.jpg" width="1002" height="975" border="0" usemap="#Map" /></td>
    </tr>
    </table>

    <map name="Map" id="Map">

    <area shape="rect" coords="483,390,928,492" href="hbds.html" />
    <area shape="rect" coords="292,524,705,726" href="xinwen.html" />
    <area shape="rect" coords="282,782,924,881" href="ct.html" />
    <area shape="rect" coords="307,80,355,100" href="ct.html" />
    <area shape="rect" coords="451,51,525,74" href="xinwen.html" />
    </map></body>

    这个网页没有用a做链接,但实际上是有五个链接的.这就是usemap的用法.

    什么是usemap呢?usemap是<img>标签的一个属性,用作指明所使用的图像地图名。

    知道了了usemap是什么,我们还要知道它的属性,这样用起来才得心应手.

    area在这是区域的意思。在这个map中我们设置了5个区域。

    shape是区域的形状,coords是矩形区域的左上角坐标和右下角坐标。

    href是对应区域所链接的位置。

    展开全文
  • USEMAP的用法

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

    usemap是<img>标签的一个属性,用作指明所使用的图像地图名。 
    后面的#Map的Map就是用<map>标签定义的一个图像地图,它的name属性是Map,像下面这样定义: 
    <map name="Map"> 
    <area shape=rect coods="100,100,200,200" href="test1.html"> 
    <area shape=rect coods="200,100,300,200" href="test2.html"> 
    ... 
    </map> 
    使用时: 
    <img src="test.gif" usemap="#Map"> 
    图像地图把一幅图像分成若干个区域,点击不同的区域会进入不同的页面。

    为了创建客户端图像映像,需要增加新属性USEMAP如下:
    〈IMG SRC="map_name.gif" USEMAP="#section_name">
    属性USEMAP(使用图像)接受段块式的超级链接,因此可以在同一HTML文件中存储映像定义信息。

    你见过“联想”机器上联想公司赠送的“我的办公室”软件的界面吗?在那幅办公室的图片上用鼠标点一下办公桌上的键盘,就启动一个“五笔字型”打字练习软件,点一下办公桌上的记事本就打开一个记事本软件,如此等等,即形象又方便。这种效果的实质是把一幅图片划分为不同的作用区域,再让不同的区域链接到做不同事情的软件上去,在HTML中也有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记。
      <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:
    <area
    class=type
    id=Value
    href=url
    alt=text
    shape=area-shape
    coods=value>
      其中。class和id:是分别指定热点的类型和id号。
    alt:用于设定热点的替代性文字。
    href:用于设定该热点所链接的url地址。
    shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:
    <area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。
    <area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。
    <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。 
      <area>标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即<map name="图像地图名称"> ...... </map>。
      下面通过一个例子来说明这两个标记的用法:


      这里是一幅新书架的图片,要做的效果是:当鼠标点“网址大全”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(urlall.htm);当鼠标点“网站设计攻略”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(siteall.htm);当鼠标点“网页技巧大全”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(pagejqlall.htm)。制作方法:
      1、插入图片,并设置好图像的有关参数,且在<img>标记中设置参数usemap="newbook" ismap,以表示对图像地图(newbook)的引用;
      2、用<map>标记设定图像地图的作用区域,并取名为:newbook;
      3、分别用<area>标记针对三本书的位置划分出三个矩形作用区域,并设定好其链接参数href。
      制作完成,本例的源代码如下:
    <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">
    <map name="newbook">
    <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">
    <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">
    <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">
    </map> 

      在制作本文介绍的效果时应注意的几点:
      1、在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致;
      2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;
      3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。

    展开全文
  • Warcraft3_UseMap01:라이브러리작성중
  • 原文地址:图解img标签的usemap使用作者:刘超 各位在看这篇文章之前请先到w3school来了解一下标签中的usemap属性是什么: http://www.w3school.com.cn/tags/att_img_usemap.asp   在有些概念之后,文章将要开始...
    原文地址:图解img标签的usemap使用作者:刘超

    各位在看这篇文章之前请先到w3school来了解一下<img>标签中的usemap属性是什么:

    http://www.w3school.com.cn/tags/att_img_usemap.asp

     

    在有些概念之后,文章将要开始介绍<img>标签的usemap详细使用方法了.

     

    usemap属性在w3school描述为: usemap 属性提供了一种客户端的图像映射机制.

     

    事实上我个人觉得它就是在一个图像上描绘了多个“热点”.这样解释好像比较容易理解一点.

     

    让我们先来看看在Dreamweaver中一个图像上被描绘上了两个热点的最终效果吧:

    [转载]图解img标签的usemap使用

    我们可以在上图很明显的看到,这个图片上有两个热点,分别在图像的左上角和右下角.只要点击不同区域时,就可以超链接到不同的地方.

     

    现来看看页面中的代码吧,这个应该比较重要些,代码如下:

    <body>

       <img src="images/loginfoot.jpg" border="0" usemap="#Map1" name="foot" width="100" height="100"/>

        <map name="Map1">   

        <area shape="rect" coords="50,50,100,100" style="cursor:hand" href="login.jsp" />

        <area shape="rect" coords="0,0,50,50" style="cursor:hand" href="main.jsp"/>  

    </map>

    </body>

    让我来解释一下这段代码吧:

    先解释这一段:<img src="images/loginfoot.jpg" border="0" usemap="#Map1" name="foot" width="100" height="100"/>

    其实不用多说,这段就是在页面上插入一个图像.

    图像为: images目录下的loginfoot.jpg.

    边框为0,页面中名称为foot,100,100:( border="0" name="foot" width="100" height="100")

    重点是这个: usemap="#Map1",我想它应该描述为在此图像中使用图像映射,映射的具体描述为页面中的一个<map>,而它的名称为Map1.

     

    接下来就要讲到<map>这个<map>的名字为Map1,<map></map>之间有两个<area/>,这两个<area/>分别代表了图片上的两个热点区域.

    下面就<area/>标签的属性来作一些介绍:

    shape="rect":热点的形状shape为矩形rect(rectangular);

    style="cursor:hand":鼠标指针cursor的样式为手hand;

    href="login.jsp":超连接到login.jsp页面;

    coords="50,50,100,100":这用属性用来描述这个指点区域的具体位置.

     

    我不知道描述位置的属性为什么要使用coords ,这很让人想不明白.如果你不明白coords里面几个值具体是什么意思,我按照个人理解,画了下面这张图.希望你看完之后能够明白:

    (coords="a,b,c,d"里面的几个值分别看作是a,b,c,d ).

                                [转载]图解img标签的usemap使用


    这副图像大小为100*100,中只有一个热点<area/>位于图像的右下角.中间用来描述位置的属性及其值为: coords="50,50,100,100",:a=50,b=50,c=100,d=100.

     

    看完之后不知道你明白了吗?

    以上均为我个人的理解,我将他分享出来.如有错误,还请各位帮忙指正,谢谢!!


    Mr.`xp

    2012-05-03

    展开全文
  • usemap做一个图片识别

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

    验证码给大家的印象就是一个随机号码,感觉很枯燥:

    • 用usemap来做一个图片识别验证码

    效果

    这里写图片描述

    usemap用法介绍

    usemap 属性提供了一种“客户端”的图像映射机制.
    他可以将一个图片在网页中更具用户的map 划一个区域area来表示逻辑映射。

    这个area有以下属性:

    • shape=”rect”:热点的形状shape为矩形rect(rectangular);

    • style=”cursor:hand”:鼠标指针cursor的样式为手hand;

    • href=”login.jsp”:超连接到login.jsp页面;

    • coords=”50,50,100,100”:这用属性用来描述这个指点区域的具体位置.

    其中,coords就是表示从xy的50,50这个点开始划区域,画的区域大小是100X100.

    代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0" width="1002">
        <tbody><tr>
            <td><img src="https://img-blog.csdn.net/20160622101737689" usemap="#Map"></td>
        </tr>
        </tbody></table>
    <map name="Map" id="Map">
        <area shape="rect" coords="0,0,173,200" href="JavaScript:alert('母鸡')">
        <area coords="173,0,373,200" href="JavaScript:alert('小狗')" shape="rect">
        <area href="JavaScript:alert('猫')" coords="374,0,564,202" shape="rect">
    </map>
    </body>
    </html>
    展开全文
  • 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 属性

    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...
  • usemap' from <code><object></code> as well as the 'useMap' IDL definition for HTMLObjectElement. Let me know if this should be added to the obsolete section. See issue #285 </p><p>该...
  • img usemap attribute

    千次阅读 2009-04-11 14:54:00
    usemap是标签的一个属性,用作指明所使用的图像地图名。 后面的#Map的Map就是用标签定义的一个图像地图,它的name属性是Map,像下面这样定义: ... 使用时: 图像地图把一幅图像分成若干个区域,点击不同的区域会进入...
  • <p>The <code>usemap</code> attribute of <code>img</code> can allow the use to specify multiple links at given coordinates of an image. <p>Unfortunately, #1428 breaks the feature. <p><strong>To ...
  • Usemap的用法

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

    千次阅读 2010-05-14 15:24:00
    它还有个usemap属性很有意思。 看看51ditu首页中有一个地图,中部有个中国地图。点击右键下载下来看下就是一个普通的图片。 但点击地图上的省份却可以出发不同的事件(或打开不同的链接),很有意思。原来是使用了...
  • usemap:true", then I check the data received on client side it is still recognized as ArrayBuffer. Is this the default behavior? How can I send a map and receive it directly?</p><p>该提问来源于...
  • 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 ...
  • usemap的用法

    2008-07-05 16:41:00
    <body> <table width="1002" border="0" cellpadding="0" cellspacing="0"> <tr> <...img src="images/index.jpg" width="1002" height="975" border="0" usemap="#Map" ...
  • 所以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&...
  • 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> &...
  • – removing # from <code>usemap="#A1"</code> or <code>usemap="#A2"</code> allows to save page like it would be one # sign allowed. – changing one of href PDF file extension to...
  • HTML <img> 标签的 usemap 属性

    千次阅读 2013-11-02 14:19:47
    usemap 属性将图像定义为客户端图像映射。 图像映射指的是带有可点击区域的图像。 usemap 属性与 标签" href="http://www.w3school.com.cn/tags/tag_map.asp"> 元素的 name 或 id 属性相关联,以建立 与 之间的关系...
  • 详细内容见http://www.w3school.com.cn/tags/att_img_usemap.asp ...其中usemap中coords="788,43,917,67"是指左上角的坐标和右下角的坐标。 例:    http://www.2909999.com/swt/" target="_blank" />

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 623
精华内容 249
关键字:

usemap