模板
教程
环境
性能
功能
管理
在网页中加入图象
在网页中加入图象
在网页中加入图象是很简单的，它通过<IMG>标识符来实现，下面是个例子：
<HTML>
<HEAD>
<TITLE> Image Example </TITLE>
</HEAD>
<BODY>
<IMG SRC=”myimage.gif”>
</BODY>
</HTML>
在此例中，图象myimage.gif将在网络浏览器上显示出来。<IMG>标识符的SRC属性指明了要显示的图象文件。你可以使用绝对或相对URL来指定一个图象文件，图象文件可以不是你本机上的文件，可以是环球网上任何一个地方的文件。
例如，如果你的机器与Internet相连，你可以使用下列代码在你的网页上显示一幅Active Server Pages网站上的图象：
<HTML>
<HEAD>
<TITLE> External Image </TITLE>
</HEAD>
<BODY>
<IMG SRC=”http://www.aspsite.com/testimage.gif”>
</BODY>
</HTML>
<IMG>标识符有许多有用的属性。例如，使用WIDTH和HEIGHT属性你可以在图象被读入之前通知浏览器图象的大小。虽然指定图象的长宽并不会加快图象读入的速度，但指定这两个值会让浏览器在读入图象时预先在网页上为图象留下空地，结果是网页显示得快了，因为浏览器不用在图象读入以后再一次计算图象周围其他元素的位置了。
注意
要养成使用<IMG>的WIDTH和HEIGHT属性的习惯，因为使用它们会使网络浏览器显示变快。
<IMG>标识符另一个有用的属性是ALT，使用ALT你可以指定替代图片显示的文本。一些用户（虽然我得承认这样的人不多）在使用网络浏览器时会关掉调入图象的选项，当这些人浏览网页时，他们看不见图片，看到的是由ALT属性指定的替代文本。
ALT属性还可以创建弹出式文字，当你的鼠标指针移到图象上的某一位置时会弹出来。这在Internet Explorer3.0及4.0和Netscape Navigator4.0上都能实现。下面是一个使用ALT属性的例子：
<HTML>
<HEAD>
<TITLE> Image With An Alternative </TITLE>
</HEAD>
<BODY>
<IMG SRC=”myimage.gif” WIDTH=10 HEIGHT=12 ALT=”This is my image!”>
</BODY>
</HTML>
<IMG>标识符另一个有用的属性BORDER，这个属性在Netscape和Microsoft的浏览器上会有不同的效果。在Netscape Navigator上，BORDER属性可以用来为一幅图象加黑边框，当你想让图象在一个框中显示时这是很有用的（见图5.11）。
图5.11 Netscape Navigator中具有边框和空白的图象
另一方面，在Internet Explorer上使用时，BORDER属性为图象加了一个透明边框（见图5.12），理论上，当要确保网页上在图象附近的其它元素与图象间隔一定距离时，这是很有用的。但是，在Netscape Navigator上，要取得BORDER属性的效果，用下面两个标识符来取代会更好些。
它们是HSPACE和VSPACE属性，它们指定图象周围水平和竖直方向的空间大小，这两个属性在Microsoft和Netscape的浏览器上都能工作，下列的例子使用了BORDER、HSPACE和VSPACE属性：
<HTML>
<HEAD>
<TITLE> Image Attributes </TITLE>
</HEAD>
<BODY>
<IMG SRC=”myimage.gif” WIDTH=10 HEIGHT=12 ALT=”This is my image!”
BORDER=5 HSPACE=10 VSPACE=10>
This is some text.
</BODY>
</HTML>
注意句子：This is some text，在图象右边界10个象素远的地方显示出来，在Netscape Navigator上，这句话在图象黑框右边界的10个象素远处显示，而在Internet Explorer，这句话在图象透明边框的右边界10个象素处显示。
图5.12 Microsoft Internet Explorer中具有边框和空白的图象
<IMG>标识符的最后一个有用的属性是ALIGN，它用来根据基行的文本定位图象，通常这个属性可取五个值：top、middle、bottom、left和right。下面的例子使用了这几个值（见图5.13）：
<HTML>
<HEAD>
<TITLE> Image Alignment </TITLE>
</HEAD>
<BODY>
<IMG SRC=”myimage.gif”> This image is not aligned
<P>
<IMG SRC=”myimage.gif” ALIGN=”top”> This image is top aligned
<P>
<IMG SRC=”myimage.gif” ALIGN=”middle”> This image is middle aligned
<P>
<IMG SRC=”myimage.gif” ALIGN=”bottom”> This image is bottom aligned
<P>
<IMG SRC=”myimage.gif” ALIGN=”left”> This image is left aligned
<P>
<IMG SRC=”myimage.gif” ALIGN=”right”> This image is right aligned
</BODY>
</HTML>
在Netscape和Microsoft的浏览器中这五个值的效果是完全一样的，图象的定位是有基行文本的位置决定的。例如，当ALIGN属性的值是“top”时，图象与文本在同一行上显示但上端对齐。
图5.13 使用不同对齐方式的图象
注意
Netscape为图象的ALIGN属性引入了一些特殊的值。然而我不支持你使用它们，因为它们只在Netscape Navigator上起作用，详细信息可参阅附录D。
