标签归档：img

上节我们讲到了旅游网站建设中不常用到的<img>标签controls属性 这节我们在来接着讲讲同样也不常使用的loop属性能做些什么 IE通常在下载后会从头至尾让电影片段播放一次。电影<img>标签的loop属性能设定重复播放这个片段多少次，具体重复次数由属性值来设定，如果该值为infinite，就会一直播放。用户还可以通过以下方法来中断循环：在电影图像上单击，如果给出控件的话则按停止按钮，或者继续播放另一个影片文档。 下面的jiecool.net.avi电影片段将从头到尾播放，然后再从头开始播放直到结束，共5次，相关代码如下： <img dynsrc=”movies/jiecool.net.avi” loop=5 src=”images/jiecool.net.gif”> 而下面的电影将不间断地反复播放，相关代码如下： <img dynsrc=”movies/jiecool.net.avi”loop=infinite src=”images/jiecool.net.gif”> 循环播放影片也有很多好处，例如一些特殊效果的动画，它们就是一个重复帧或片段的序列。不必把多个片段串成一个长电影，这样只会延长下载时间，仅仅循环单个简化的片段即可。 虽然这个属性不常使用，但杰酷在旅游网站建设中经常使用到一些小的FLASH影片，它们就是一直不停的重复循环，杰酷使用这些重复循环的FLASH为相关旅游网站起到了画龙点景的作用。

上节我们讲到旅游网站建设中不常使用到的<img>标签dynsrc属性 这节我们也将继续详细讲解旅游网站建设中不常使用到的<img>标签controls属性。 controls属性 IE在一般情况下只能在一个界定的视窗内播放一次电影，而没有任何可视的用户控件来控制视窗的播放。现在IE 5或更高版本已经不再支持这种做法了，但是老版本浏览器的用户仍然可以通过在播放窗口中单击鼠标，来重启、停止和继续电影的播放。使用controls属性可为电影视窗增加可视化控件，这样用户就可以通过鼠标播放、快进、回放、停止和暂停电影。如果电影片段有配乐，IE还会提供音量控制。在实际旅游网站建设中因为此属性已被FLASH或其它所取代，所以杰酷也不推荐使用<img>里的controls属性。 例如：<img dynsrc=”movies/jiecool.net.avi” controls src=”images/jiecool.net.gif”>这段代码为jiecool.net.avi电影片段的视频窗口添加了各种回放(playback)控件。

在旅游网站建设中不常用到的dynsrc属，它是<img>标签内使用的扩展属性，可以使IE显示一段AVI电影。它需要的值是电影文件的URL，需要注意的是一定得用引号把他括起来。 例如，下面的这段代码显示了一个名为jiecool.net.avi的AVI电影文件的标签和属性： <img dynstc=”movies/jiecool.net.avi”> IE对待dynsrc电影的方式与内联图像一样：依照视频帧的维数使其符合当前主体内容。与普通图像一样，dynsrc指向的电影文件在从服务器下载之后会立即播放。您可以改变那些默认属性，加入一些用户控制的其他属性，这些内容在后面将进行介绍。 因为目前其他90%的浏览器都会忽略IE特有的关于电影的特殊属性，因此当这些浏览器遇到没有src属性和图像URL的<img>标签，就可能会披搞糊涂。因为其他浏览器不支持，所以杰酷也并不建议使用<img>的dynsrc属性。 其他浏览器显示静止图像而不能播放电影；IE则相反，它能播放电影，但不能显示图像。 同样<img>的dynsrc属性顺序也没有任何影响。例如： <img dynsrc=”movies/jiecool.net.avi” src=”images/jiecool.net.gif”>或者<img src=”images/jiecool.net.gif” dynsrc=”movies/jiecool.net.avi”>的前后排序也没有任何的影响。IE会加载并播放这个AVI电影jiecool.net.avi；而其他图形浏览器则加载和显示jiecool.net.gif图像。

在旅游网站建设中适当地显示使用图像，可以在任何地方把图像的任何不同标准和扩展属性组合在一起使用。<img>标签内多个属性的前后顺序没有作明确的规定，可以任意做调整。只是不要使用多余的<img>属性。 视频扩展 在旅游网站建设中，<img>标签的controls、dynsrc、loop用的很少或可以说基本上用不上。<img>标签的controls、dynsrc、loop和start等特殊的属性扩展只适用于IE，而不是HTML 4或XHTML的标准属性。它们允许将一个内联电影像图像一样嵌入到主体内容中。 通过相关插件扩展程序，Netscape就可以实现同样的行为。但插件给用户增加了一些不好的负担，因为浏览器使用者必须先找到这种插件然后并安装它们才能够看到内联视频。 另一方面，IE的<img>标签扩展使得视频显示占据了浏览器里面的一部分。 其次IE的影像扩展到现在为止也十分有限。90%的其它浏览器都不支持它们，而且它还只能使用AVI格式的电影文件播放，因为那是IE自带的播放器格式，所以只能通过Microsoft Windows操作系统启动。 最近在浏览器技术、对象尤其是applet方面的改革。可能会给IE增加一些新功能，并废弃悼早已经过载的<img>标签。但离我们用于旅游网站建设中这些技术还是比较远。

Netscape支持的4种<img>属性，现IE下也的到了支持，这4种属性许可用户使用JavaScript来操纵图像。 第一种是name属性比如只通过”kumquat”就可以在JavaScript applet中引用这张金橙的图片，还可以对其进行擦除或者其他修改。 如图像没有命名或者没有赋予id值，就不能在JavaScript中单独操作该图像。另外三个属性分别提供了一些特殊的Javascript事件处理器。每个属性的值都是一段用引号括起来的JavaScriPt代码，其中可能包含一个或多个JavaScript表达式，这些  表达式将用分号分隔开来。如果用户要停止图像的加载，通常会单击浏览器的”stop(停止)”按钮，这时，一 般浏览器都会调用onAhort事件处理器。 例如，你可能会利用这个onAbort消息来警告用户，提醒他们停止某个重要图像的加载，例如图像映射： <img src=”imgaes/jiecool.net.glf” usemap=”#map1″onAbort=”window.alertf(‘www.jiecool.net.’)”> img标签在使用的时候 一下几个事件非常的有用： onError：当图片加载出现错误，会触发 经常在这里事件里头写入将图片导向默认报错图片，以免页面上出现红色的叉 onLoad：事件是当图片加载完成之后触发 onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载” 很好的利用这3个事件可以在HTML中实现很多图片的功能 例如：处理图片加载失败情况：<img src=”image/jiecool.net.jpg” width=”258″ height=”178″ onerror=”this.src=’images/abcd.jpg’” /> IMG的onerror自动选择最快线路，根据服务器返回 错误： <img src=”http://www.jiecool.net/NotExistsUrl” width=”1″ height=”1″ onerror=”location.top.url=’http://www.jiecool.net/’”/> <img src=”http://www.jiecool.net/NotExistsUrl” width=”1″ height=”1″ onerror=”location.top.url=’http://www.jiecool.net/’”/> 例如，你可能会利用这个onAbort消息来警告用户，提醒他们停止某个重要图像的加载，例如图像映射： <img src=”images/jiecool.net.gif” usemap=”#map1″ onAbort=”window.alert(‘注意:这张照片含有重要的链接,请重新载入.’)”> … 继续阅读 →

class、dir、event、id、lang、style和title属性 旅游网站建设中，这些几乎通用的属性允许我们以一种常见的方式来标识title和标记id图像标签的内容，以便于日后的引用或者自动化处理，并能改变内容的显示特征class、style，引用所使用的语言lang和指定文本流应该流动的方向dir等。 当然，还有发生在被标记内容中和其附近的所有用户事件，这些事件可以被浏览器捕捉到，并通过事件的”on”属性和一些编程来对它们做出反应。在这些众多的HTML 4和XHTML属性中，id是最重要的一个。它允许对图像进行标记，以便程序或者洳览器操作以后可以访问它。其他属性和<img>一起使用是否有意义尚有疑问。 但我们不得不承认在旅游网站建设中，在样式表的选项中，几乎没有什么能够影响图像的显示，所以最好还是包含一个标题(title)，尽管使用alt更好一些。而语言(lang)和显示方向(dir)将对图像的显示有什么影响似乎还很难讲

在旅游网站建设中<img>标签的ismap和usemap属性告诉浏览器这个图像是一个特殊的可视映射，用于可以通过鼠标来对一个或者多个链接进行选择，也就是通常所的图像映射image map。图像映射的ismap样式被称为“服务器端”图像映射，它只可以用在<a>标签不标识的超连接里面。 例如：<a href=”/images/jiecool”> <img src=”/i/jiecool.net.gif” ismap=”ismap” /> </a> 当浏览者在 ismap 图像上单击了某个地方时，浏览器就会自动把鼠标的 x位置和y的位置发送到服务器端。特殊的服务器端软件（在本例中是 /images/jiecool 程序）可以依据发送的坐标来做出具体响应。 usemap 属性，提供了一种“客户端”的图像映射机制，它有效地消除了服务器端对鼠标的X坐标和Y坐标的处理，以及因此带来的网络延迟速度过慢的问题。通过 <map> 和 <area> 标签，旅游网站建设可以提供一个描述 usemap 图像中超链接热点区域坐标的映射，这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL，它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标全部转换成特定的行为，包括加载和显示另外的文档。

在实际的旅游网站建设中hspace属性和vspace属性用到的比较少，通常图像浏览器不会在图像和其周围的文字之间留出很多空间。除非创建一个透明的图像边框来扩大这些间距，否则图像和其周围文字之间默认的两个像素的距离，对于大多旅游网站制作者来说是太近了。如果把图像放在超链接中，特殊颜色的边框会把你费尽心思留出的所有间距都占据了，而且还会使人们注意到文字与图像是多么接近。 hspace和vspace属性可以给图像一个自由呼吸的空间。通过hspace，可以以像素为单位，指定图像左边和右边的文字与图像之间的间距，而vspace值则是上面和下面的文字与图像之间距离的像素数; 杰酷在实际的旅游电子商务网站建设中用到这两个属性也非常的少。因为这两个属性也完全可以用样式表来代替。

在旅游网站建设时需要注意height和width属性有一种隐藏的特性，就是人们无需指定图像的实际尺寸，也就是说，这两个值可以比实际的尺寸大一些或者小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。但需要注意的是，浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。 在旅游网站建设使用height和width的另外一种技术，是可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能。设想一下，如果你想在文档中放置一个彩色的横条。你不需要创建一个具有完整尺寸的图像，相反，你只要创建一个宽度和高度为1个像素的图像，并把自己希望使用的颜色赋给它。然后使用height和width属性把它扩展到更大的尺寸。 如果提供了一个百分比形式的width值而忽略了height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲。

上接 旅游网站制作中使用到的<img>标签(8) height和width属性 在旅游网站建设时，你是否见过当文档加载时其内容会显示不规律的移动？之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。但这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前必须要不断检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。 在旅游网站建设中，有一种更为有效的方法是通过<img>标签的height和width属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在<img>标签中出现的次序并不重要。