html：图像链接和图像映射

最新推荐文章于 2022-06-05 19:16:54 发布

最新推荐文章于 2022-06-05 19:16:54 发布 · 191 阅读

本文介绍了图像处理的基础知识，包括位图与矢量图的区别、网页中图像的使用方法及注意事项，如图像映射与链接插入技巧。此外，还提供了如何在网页中合理放置大图像的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图像

分为：

(1)位图：

GIF	采用查找表存储颜色，最多存储256种颜色，如果一个图像有大量单调颜色，则只存储一个即可。适用于颜色单调的图片。
JPEG	能够存储无限种颜色，因此适用于颜色很多的图像。
PNG	不是所有浏览器支持

网页放置大图像的建议：先提供小版本，然后提供大图像的链接。

(2)矢量图：

flash、silverlight

<img>元素

向网页中添加图像使用<img>元素。

img元素的属性：

(1)src：图片来源URL。

(2)alt:辅助效果.

(3)align：有right、left、top、bottom等。

(4)height和width:单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小。

(5)hspace和vspace：图像和周围文字的空白间隙大小。

例如:<img src = "images/redhat.gif" alt = "redhat os" align = "left" width = "150" height = "150" hspace = "4" vspace = "4">

建议：如果要把一个图片设置成很小，则建议新建一个很小的图片。

<object>元素

添加多媒体文件：<object>

常用属性：

(1)classid:运行指定文件的应用程序。

(2)codebase:基URL。

在图像上插入链接：点击图片，跳转页面。

在<a></a>之间插入<img/>元素.

<html> <head><title>Home</title></head> <body> <img src = "images/wrox_logo.gif"/> 以下是130*130的图像 <img src = "images/apple.jpg" alt = "apple"/> 以下是width = 130的图像 <img src = "images/apple.jpg" alt = "apple" width = "130"/> 以下是80*150的图像 <img src = "images/apple.jpg" alt = "apple" width = "150" height = "80"/> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello <img src = "images/redhat.gif" alt = "redhat os" align = "left" width = "150" height = "150" hspace = "4" vspace = "4"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut risus tellus, hendrerit id, sagittis sed, lobortis eget, augue. </body> </html>

图像映射：一个图片的不同区域对应不同链接。

图像映射分为：

(1)服务器端图像映射：将点击的坐标发送给服务器，由服务器的脚本来决定。

(2)客户端图像映射：根据点击位置不同确定链接目的。

通过<img/>后添加<map>和<area>设置。

<map>元素表明映射的开始

<area>元素表明每个区域，如果要把一个图片分4个区域，则用4个area。

<map>元素只有一个name属性.

下面介绍area元素的属性：

(1)shape：必须的属性，用于描述区域的形状，rectangle\poly\circle\default可选,default指的是还没有被定义的区域。

(2)coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。

(3)href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"