>  기사  >  웹 프론트엔드  >  深入理解HTML图像_html/css_WEB-ITnose

深入理解HTML图像_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:32:341561검색

目录

[1]深入理解HTML图像_html/css_WEB-ITnose [2] [3]

深入理解HTML图像_html/css_WEB-ITnose -> image 图像

    【必须属性】

        【1】src:地址

        【2】alt:图像替代文本,供探索引擎抓取使用

    【可选属性】

        【1】height:图像高度

        【2】width:图像宽度

        【3】ismap:为图像定义为服务器端图像映射

        【4】longdesc:与alt属性类似,提供多于1024字符的长文本描述

        【5】usemap:为图像定义客户端图像映射 usemap = "#元素的name或id属性"

<img src="test.jpg" alt="测试图片"    style="max-width:90%"  style="max-width:90%">

 

映射地图

        [注意]深入理解HTML图像_html/css_WEB-ITnose中的usemap属性可引用中的id或name属性(取决于浏览器),所以应同时向添加id和name属性。

 

图像热区

  总是嵌套在标签中

    【必须属性】

        【1】alt:替代文本

    【可选属性】

        【1】coords:定义可点击区域的坐标

        【2】href:定义此区域的目标URL

        【3】nohref:排除某个区域

        【4】shape:定义区域的形状

    【a】圆形(circ/circle) coords= "x,y,r" x,y是圆心坐标;r是半径

    【b】多边形(poly/polygon) coords = "x1,y1,x2,y2,x3,y3……" x,y是多边形每个顶点的坐标

    【c】矩形(rect/rectangle) coords = "x1,y1,x2,y2" x1,y1是左上角坐标;x2,y2是右下角坐标

            【d】全部区域default(默认)

            [注意]标签采用"先来先得"的顺序,如果区域有重叠,以先出现的为准

<img src="jihe.jpg" alt="几何图形"    style="max-width:90%"  style="max-width:90%" usemap="#map"><map name="map" id="map">  <area shape="rect" coords="35,38,150,158" href="line4.html" alt="四边形">  <area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六边形">  <area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12边形">  <area shape="circle" coords="512,95,60" href="line0.html" alt="圆形"></map>

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.