实例

带有可点击区域的图像映射：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

<html>

<body>

<p>请点击图像上的星球，把它们放大。</p>

<img

src="/i/eg_planets.jpg"

border="0" usemap="#planetmap"

alt="Planets" />

<map name="planetmap" id="planetmap">

<area

shape="circle"

coords="180,139,14"

href ="/example/html/venus.html"

target ="_blank"

alt="Venus" />

<area

shape="circle"

coords="129,161,10"

href ="/example/html/mercur.html"

target ="_blank"

alt="Mercury" />

<area

shape="rect"

coords="0,0,110,260"

href ="/example/html/sun.html"

target ="_blank"

alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

</html>

注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

带有可点击区域的图像映射：HTML <map> 标签的更多相关文章

  1. HTML <map> 标签－创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  2. HTML <area> 标签 带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  3. 利用HTML中map标签实现整张图片带有可点击区域的图像映射：

    实现效果说明:一整张背景图片,实现图标区域出现链接,可点击跳转到指定页面. <div class="brand"> <img src="images/b ...

  4. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  5. HTML创建图像映射，布局，表单

    来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...

  6. 图像映射<map>、<area>

    1.<map>定义图像映射,图像映射(image-map)指带有可单击区域的一幅图像. 2.<area>定义图像映射中的区域,area元素永远嵌套在map元素内部,area元素 ...

  7. html 图像映射（一个图像多个连接）

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  8. html 图像映射

    个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...

  9. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

随机推荐

  1. PHP 安全检测代码片段

    /** * html转换输出(只转义' " 保留Html正常运行) * @param $param * @return string */ function htmlEscape($para ...

  2. 8.3 MPI

    MPI 模型 如图MPI的各个运算节点是分布式的.每一个节点可以视为是一个“Thread”,但这里的不同之处在于这些节点没有所谓的共享内存,或者说Global Memory.所以,在后面也会看到,一般 ...

  3. Morris Traversal

    昨天临近要睡觉的时候做了一个leetcode题目,"Recover BST",算法很容易就想到了,直接找出两个异常点就好了,但是我写的算法是用栈实现的非递归遍历,空间复杂度是O(N ...

  4. HIbernate学习笔记（二） hibernate对象的三种状态与核心开发接口

    1.在hibernate中持久化对象有三个状态,这个面试时可能会问到: (1)transient瞬时态:在数据库中没有与之匹配的数据,一般就是只new出了这个对象,并且在session缓存中也没有即此 ...

  5. ubuntu免验证登陆权限问题

    由于经常ssh到服务器,每次输入密码很烦.就传了本机公钥到服务器. 和所有教程将的一样,做起来挺简单的. 本机ssh-keygen -t rsa生成公钥和密钥. 将公钥传至服务器,用户目录下.ssh/ ...

  6. Java管道流PipedStream

    管道读取流和管道写入流可以像管道一样对接上,管道读取流就可以读取管道写入流写入的数据.需要注意的是需要加入多线程技术,因为单线程,先执行read,会发生死锁,因为read方法是阻塞式的,没有数据的re ...

  7. 转载c#泛型 类型参数的约束(c#编程指南)

    在定义泛型类时,可以对客户端代码能够在实例化类时用于类型参数的类型种类施加限制.如果客户端代码尝试使用某个约束所不允许的类型来实例化类,则会产生编译时错误.这些限制称为约束.约束是使用 where 上 ...

  8. Web- 一些标签样式

    网上找来的.有点用 1.只有下划线的文本框:<input style="border:0;border-bottom:1 solid black;background:;"& ...

  9. 把SVN添加到windows服务

    sc create SVN_Service binpath= "D:\DevTools\Subversion\bin\svnserve.exe --service --root D:\Dev ...

  10. BeanFactory not initialized or already closed - call 'refresh' before access

    错误:java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' b ...