正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

  • 微信公众号
  • 图像热点区域链接

    jingyile·2018-09-19·203 次阅读

    图像热点区域链接

    即 将某一图像划分为n个不同的热点区域,鼠标点击不同区域时链接 到不同的内容。

    常见应用:景区景点分布图,点图中不同顶点分别显示其景点详细介绍。

    HTML实现的大体结构:

    • <img src="图片地址" usemap="#标记名称" />//教材上和网上好多地方说是username,这是有问题的。
    • <map name="标记名称">
    • <area shape="热区形状" coords="热区坐标" href="链接地址" />
    • <area shape="热区形状" coords="热区坐标" href="链接地址" />
    • <area shape="热区形状" coords="热区坐标" href="链接地址" />
    • </map>

    shape的取值:<area shape="default|rect|circle|poly">

    default:规定全部区域,无意义...

    rect:定义矩形区域

    coords="x1,y1,x2,y2" (x1,y1)为左上角坐标,(x2,y2)为右下角坐标。

    circle(circ):定义圆形

    coords="x1,y1,r" (x1,y1)为圆心,r为半径。

    poly(polygon):定义多边形区域

    coords值分别为多边形各个顶点坐标

    那么,如何去得到点的精确坐标呢。

    虽然Dreamwever提供有特别方便的这类功能,但是我还是不喜欢去用它。

    HTML提供了一个叫ismap的属性

    ismap 属性是一个布尔属性。

    ismap 属性将图像定义为服务器端图像映射(图像映射指的是带有可点击区域的图像)。

    当点击一个服务器端图像映射时,点击坐标会以 URL 查询字符串的形式发送到服务器。

    注意:只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时,才允许使用 ismap 属性。

    9.191 - 图像热点区域链接

     

     


    正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

    
    
    查看评论

    Post a new comment

    Post a new comment
    欢迎回来 , [ 修改 ]




    加载中……