zoukankan      html  css  js  c++  java
  • 前端学习01-07图像地图

    1.图像超链接

    格式<a href=><img src=""></a>

    2.图像地图

    把一幅图像分成过个区域,每个区域指向不同的URL地址,譬如,将衣服中国地图的图像按照省市划分成若干区域,这些区域被称为热点,单击热点区域,就可以连接到与相应省市有关的页面,这就是图像地图。

    客户端图像地图:

    怎样产生图像地图?

    首先必须定义出图像上的个热点区域的形状,位置坐标,机器指向的url地址等信息,这个过程叫图像热点映射,图像热点映射需要使用<map name=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称。

    (2)图像热点映射中各个区域用<area>标签说明,<area>标签的格式为:<area shape="形状" coords="坐标" href=“url”>.href部分也可以用nohref替换,表示在该区域单击鼠标无效,<area>标签还可以有一个target属性,用来指明浏览器在哪个窗口或帧中显示href属性所指向的网页数据。

    (3)定义好了图像热点映射后,接着就要在<img>图像标签中增加一个名为usemap的属性设置,usemap属性指定该图像被用做图像地图,其设置值为所使用的图像热点映射名称,格式为:在<map>标签的name属性设置值前多加一个"#"字符。例如,<img src="china.jpg" usermap="#mymap">

    <img src="timg.jpg" border=0 usemap="#mymap">
    <map name=mymap>
        <area shape="rect" href="a.html" coords="0,0,150,200">
        <area shape="rect" href="b.html" coords="0,0,150,200">
        <area shape="rect" href="c.html" coords="0,0,150,200">
    </map>

    shape属性的设置说明:

    rect定义一个矩形区域,doords属性设置值为矩形的左上角右下角的坐标,各个坐标之间用逗号隔开。

    poly定义一个多边形区域,coords属性设置值为多边形各顶点的坐标值

    circle定义一个圆形区域,coords属性设置值为圆心坐标以及半径,钱两个参数分别为圆心的很重坐标,第三个参数为半径。

  • 相关阅读:
    字节流、字符流
    ArrayList、LinkedList、Vector 的区别。
    Java 为每个原始类型提供了哪些包装类型:
    int 和 Integer 有什么区别
    怎样自动把报表插入到 word 文档中
    web 报表中电子图章 / 水印的轻松实现
    玩转报表排名
    报表设计技巧之隔行异色
    单据类报表的制作
    轻松 get 报表模糊查询技能
  • 原文地址:https://www.cnblogs.com/LoganChen/p/8066575.html
Copyright © 2011-2022 走看看