zoukankan      html  css  js  c++  java
  • 12. HTML图像

    一. 方法:<img />

         注意: <img />是空标签。

                  <img border="0" src="url.img" />

    二. 替换文本属性alt

        作用: 浏览器无法载入图像时, 显示替代的文本属性。

        方法: 属性alt="text"

                 <img src="url.img" alt="textvalue"/>

    三. 实例

    (1)HTML页面背景图片 <body background="i/value.img"></body>

            注意: gif 和 jpg文件均可用作HTML背景。

    (2)对其方式: <p>

                          <img src="i.img" align="bottom" />

                           </p>

            属性:align, 默认为bottom。

                               若为left,right, 则不管在文本中何位置, 都会在左边或右边。

                  

    (3)调整图像尺寸: width, height属性。

    (4)创建图像映射: 图像中的每个区域都是超链接。

            (1)<img />中需要有usemap="#value",注意以#开头。

            (2)<map></map>中的id和name属性值应与usmap的值相同(没有#)。

            (3)<map></map>中添加<area />(没有结束标签)。

                 <area />属性, 6个, alt, ,target, shape, coords,href,nohref(值, nohref)。

    <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>

  • 相关阅读:
    剑指offer 二叉树中和为某一个值的路径
    剑指offer 二叉搜索树的后序遍历序列
    二叉树
    剑指offer 二叉树的层序遍历
    剑指offer 二叉树的镜像
    二叉树的子结构
    牛客网 斐波那契数列
    NMT 机器翻译
    剑指offer 从尾到头打印链表
    剑指offer 链表中倒数第k个节点
  • 原文地址:https://www.cnblogs.com/gavinwu/p/3200154.html
Copyright © 2011-2022 走看看