HTML5技术

第六章 图像的处理_HTML教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-24 14:16 我要评论( )

html head title图像大小的设定/title /head body center p 缩小图像 pimg src=../../imge/6-3.gif width=350 height=200 p原图显示 p img src=../../imge/6-3.gif width=400 height=236 p放大图像 p img src=../..

<html>
<head>
<title>图像大小的设定</title>
</head>
<body>
<center>
<p>
缩小图像
<p><img src="../../imge/6-3.gif" width="350" height="200">
<p>原图显示
<p>
<img src="../../imge/6-3.gif" width="400" height="236">
<p>放大图像
<p>
<img src="../../imge/6-3.gif" width="500" height="250">
</p>
</center>
</body>
</html>

6-2-5 图像边框的设定

实例:6-2-5.html

<html>
<head>
<title>设定图像的边框</title>
</head>
<body>
<center>
<div align="center">
<pre><img src="../../imge/xjbjtp22.jpg" border="10"></pre>
</div>
</body>
</html>

6-3 图像的超链接

6-3-1 图像的超链接

    图像的链接和文字的链接方法是一样的,都是用<a>标签来完成,只要将<img>标签放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框,这个边框颜色也可以在<body>标签中设定。

实例:6-3-1.html

<html>
<head>
<title>使用图像为选取的对象</title>
</head>
<body>
<p align="center">&nbsp;</p>
<h1 align="center">图片的超链接</h1>
<P>
<center>
<a href="" target="_blank"><img alt="搜狐网站" src="../../imge/logo[1].gif"></a><p>
<a href=""><img alt="百度搜索" src="../../imge/logo[2].gif"></a><p>
<a href=""><img alt="新浪网站" src="../../imge/logo(3).gif"></a>
</center>
</body>
</html>

6-3-2 图像的影像地图超链接

   在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法:

   影像地图(Image Map)标签的使用格式:

    <img src="图形文件名" usemap="#图的名称">
         
      <!-- 插入图片时要在<img>标记中设置参数usemap="#图的名称",以表示对图像地图(图的名称)的引用;-->

    <map name="图的名称">

       <!--用<map>标记设定图像地图的作用区域,并用name属性爲图像起一个名字-->

     <area shape=形状 coords=区域座标列表 href="URL资源地址">
     ......可根据需要定义多少个热点区域
     <area shape=形状 coords=区域座标列表 href="URL资源地址">

    </map>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 第六章 图像的处理_HTML教程

    第六章 图像的处理_HTML教程

    2015-09-24 14:16

网友点评