`
忧里修斯
  • 浏览: 428196 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

html <map>标签

阅读更多
页面图像动态加热区,(使用map标签) 
在Html中,给图像使用map标签,可以给图像的某个部分建立超连接,用法如下:

<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect|circle|poly" coords="#" href="url">
</map>
注:所有的坐标都是相对于图片左上角的

其中,坐标coords对各个shape的解释如下:

shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right 

即,当shape是矩形时,coords表示矩形左上及右下(x2, y2)的坐标
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius

即,当shape是圆形时,coords表示圆中心点坐标(x, y)及半径

shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...

即,当shape是poly多边形时,coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...


注意:以上所有坐标都是相对于图形img.gif左上脚坐标而言的


以下是一个例子: 

<img src="mapimg.gif" usemap="#Face">
<map name="Face">
   <area shape="rect" href="page.html" coords="140,20,280,60">
   <area shape="poly" href="image.html" coords="100,100,180,80,200,140">
   <area shape="circle" href="new.html" coords="80,100,60">
</map>
分享到:
评论

相关推荐

    HTML标签总结,包含HTML4和HTML5

    HTML5中新增了一些标签,如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;audio&gt;`、`&lt;canvas&gt;`、`&lt;video&gt;`等,同时也废弃了一些标签,如`&lt;applet&gt;`、`&lt;basefont&gt;`等。 HTML标签是网页开发的基础,熟悉这些标签的用途和功能是开发网页...

    Html5中文手册(程序员必备手册)

    51、&lt;map&gt; 定义图像映射。 声明:本电子书内容源于网络,所有内容仅供测试, 不保证内容的正确性! HTML 5中文参考手册 由夏天(博客:www.xiatianhk.com)收集并整理 52、&lt;mark&gt; 定义有记号的文本。 53、&lt;menu&gt; 定义...

    jquery-1.1.3 效率提高800%

    &lt;br&gt;Safari 2 3575ms 475ms 753% &lt;br&gt;Opera 9.1 3196ms 326ms 980% &lt;br&gt;Average improvement: 867% &lt;br&gt;&lt;br&gt;下表为jQuery1.1.3与常用的一些JS库选择器的对比:&lt;br&gt;Browser Prototype jQuery Mootools Ext Dojo &lt;br&gt;...

    地图定位(jsp、html嵌入地图)

    嵌入jsp里面的地图,左上角的人形可以拖动到可以看的位置就会看到当地的接到和人物。

    嵌入式HTTP服务器NanoHTTPD.zip

     Map&lt;String, List&lt;String&gt;&gt; decodedQueryParameters =  decodeParameters(session.getQueryParameterString());    StringBuilder sb = new StringBuilder();  sb.append("&lt;html&gt;");  sb....

    jQuery完全实例.rar

    &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

    jQuery详细教程

    亲自试一试&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); })...

    html5大作业,mp4

    精彩视频是从网上下载的mp4格式,将之放入文件夹map4下,使用&lt;source&gt;标签定义媒介资源,并且点开页面自动加载运行。站长简介和注册使用了&lt;form&gt;表单。文章分布、趣味游戏使用&lt;script&gt;进行表单验证和动态内容修改。...

    freemarker总结

    其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替&gt;会有更好的效果,因为 FreeMarker会把&gt;解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:&lt;#if (x&gt;y)&gt; ...

    html的一些面试题.pdf

    9. `&lt;link&gt;`和`&lt;script&gt;`标签分别用来做什么? 10. 行内元素和块级元素的区别是什么? 11. HTML5中的表单元素有哪些新变化? 12. 什么是图像地图(image map)? 13. HTML注释的语法是什么? 14. iframe是什么,主要...

    JavaExcel读写库JxlExcel.zip

    &lt;/templates&gt;模板(template)template元素用于定义一个模板,包含一个属性name,用于唯一标识该模板标题行(tittleRow)使用titleRow可以定义多行标题,每行标题又包含多个标题列(titleCol),标题列可以像html ...

    FreeMark学习笔记

    1,开始标签:&lt;#directivename parameter&gt; 2,结束标签:&lt;/#directivename&gt; 3,空标签:&lt;#directivename parameter/&gt; 实际上,使用标签时前面的符号#也可能变成@,如果该指令是一个用户指令而不是系统内建指令时,应将#符号...

    Lesson01_08 图像地图

    (1)定义热点区域:使用&lt;map&gt;标签定义热点区域,每个热点区域使用&lt;area&gt;标签说明。热点区域的形状、位置坐标、及其指向的url地址信息都需要指定。 (2)热点区域的形状和坐标:&lt;area&gt;标签的shape属性指定热点区域...

    struts2 标签库 帮助文档

    7. &lt;s:autocompleter&gt;&lt;/s:autocompleter&gt;-----自动完成&lt;s:combobox&gt;标签的内容,这个是ajax B: 1. &lt;s:bean name=""&gt;&lt;/s:bean&gt;-----类似于struts1.x中的,JavaBean的值 C: 1. &lt;s:checkbox&gt;&lt;/s:checkbox&gt;---...

    html map 标签使用

    html map 标签使用

    详解 html area标签

    area 元素总是嵌套在 &lt;map&gt; 标签中。本文重点给大家介绍html area标签的相关知识,需要的朋友参考下吧

    JSP实现用于自动生成表单标签html代码的自定义表单标签

    本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签。...Map&lt;String&gt; map = new HashMap&lt;String&gt;(); map.put(2, 选项二); map.put(3, 选项三); map.put(4, 选项四); map.put(5, 选

    cms后台管理

    protected List&lt;Content&gt; getList(Map&lt;String, TemplateModel&gt; params, Environment env) throws TemplateException { Integer[] ids = DirectiveUtils.getIntArray(PARAM_IDS, params); if (ids != null) { //...

    jfinalpluginsjfinal-dreampie.zip

     public Map&lt;String, AuthzHandler&gt; getJdbcAuthz(); } 13.shiro的freemarker标签库 &lt;@shiro.hasPermission name="P_USER"&gt;  &lt;li&gt;&lt;a href="/admin/user"&gt;${i18n.getText("admin.user")}&lt;/a&gt;&lt;/li&gt;  ...

    Html image 标签 配合 map使用

    NULL 博文链接:https://zongyukai20070419095606.iteye.com/blog/603698

Global site tag (gtag.js) - Google Analytics