2-2 敶勗? (Images)

除了要能夠顯示文字外，網頁的另一個重要功能是要顯示影像。顯示影像所用的標籤是 img，其格式如下：

以下是一個簡單的範例：

上述範例的完整原始檔案如下：

原始檔（image01.htm）：（灰色區域按兩下即可拷貝）

<HTML>
<HEAD>    
	<TITLE> 如何顯示影像 </TITLE>
</HEAD>
<BODY>
<p>基本影像顯示：<br>
<img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！">
<p>影像不存在時的顯示：<br>
<img src="multimedia/sbtree0.gif" alt="這是一個不存在的影像檔案！">
<p>以像素值設定影像高度：<br>
<img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！" height=150>
<p>以像素值設定影像高度與寬度：<br>
<img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！" height=50 width=200>
<p>以百分比設定影像高度（影像會隨著視窗大小而調整）：<br>
<img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！" height=20%>
</BODY>
</HTML>

在上述的範例中，我們用不同的方式來設定影像在網頁顯示的大小。請特別注意下列事項：

如果不設定影像的長度及寬度，影像呈現的大小即是影像本身的大小。
如果只設定影像的長度或寬度，那麼整個影像就會成等比例放大或縮小，所以影像看起來不會變形。
如果同時設定影像的長度及寬度，那麼影像即根據所給的數值來呈現。（所以可能產生變形。）
如果所給的長度或寬度是百分比，那麼影像呈現的大小會隨著視窗的大小而改變。

Hint

ALT 應該是「替代文字」，就是當圖片路徑錯誤的時候，可以在原本圖片的地方看到替代的說明文字，而 Internet Explorer 在設計時做了一個小修改，讓滑鼠移到影像時，會跳出小視窗顯示這段文字，久而久之，大家都認為那是該有的功能了。（謝謝942011來函說明。）

另外我們可以使用 align 屬性來對齊影像和文字，請見下列範例：

Example（image02.htm）：

上述範例的完整原始檔案如下：

原始檔（image02.htm）：（灰色區域按兩下即可拷貝）

<HTML>
<HEAD>    
	<TITLE> 如何顯示影像：使用 align 屬性 </TITLE>
</HEAD>
<BODY>
<p>align=top：<br>
<img src="multimedia/sbtree.gif" align=top>
潯陽江頭夜送客，楓葉荻花秋瑟瑟。主人下馬客在船，舉酒欲飲無管弦。醉不成歡慘將別，別時茫茫江浸月。
<p>align=middle：<br>
<img src="multimedia/sbtree.gif" align=middle>
潯陽江頭夜送客，楓葉荻花秋瑟瑟。主人下馬客在船，舉酒欲飲無管弦。醉不成歡慘將別，別時茫茫江浸月。
<p>align=bottom：<br>
<img src="multimedia/sbtree.gif" align=bottom>
潯陽江頭夜送客，楓葉荻花秋瑟瑟。主人下馬客在船，舉酒欲飲無管弦。醉不成歡慘將別，別時茫茫江浸月。

<p>align=left：<br>
<img src="multimedia/sbtree.gif" align=left>
漢皇重色思傾國，御宇多年求不得。楊家有女初長成，養在深閨人未識。
天生麗質難自棄，一朝選在君王側。回眸一笑百媚生，六宮粉黛無顏色。
春寒賜浴華清池，溫泉水滑洗凝脂。侍兒扶起嬌無力，始是新承恩澤時。
雲鬢花顏金步搖，芙蓉帳暖度春宵。春宵苦短日高起，從此君王不早朝。
承歡侍宴無閑暇，春從春游夜專夜。後宮佳麗三千人，三千寵愛在一身。
金屋妝成嬌侍夜，玉樓宴罷醉和春。姊妹弟兄皆列土，可憐光彩生門戶。
遂令天下父母心，不重生男重生女。驪宮高處入青雲，仙樂風飄處處聞。
緩歌謾舞凝絲竹，盡日君王看不足。漁陽鼙鼓動地來，驚破霓裳羽衣曲。
九重城闕煙塵生，千乘萬騎西南行。翠華搖搖行復止，西出都門百餘裡。
六軍不發無奈何，宛轉蛾眉馬前死。花鈿委地無人收，翠翹金雀玉搔頭。
君王掩面救不得，回看血淚相和流。黃埃散漫風蕭索，雲棧縈紆登劍閣。
峨嵋山下少人行，旌旗無光日色薄。蜀江水碧蜀山青，聖主朝朝暮暮情。
行宮見月傷心色，夜雨聞鈴腸斷聲。

<p>align=right：<br>
<img src="multimedia/sbtree.gif" align=right>
天旋地轉回龍馭，到此躊躇不能去。馬嵬坡下泥土中，不見玉顏空死處。
君臣相顧盡沾衣，東望都門信馬歸。歸來池苑皆依舊，太液芙蓉未央柳。
芙蓉如面柳如眉，對此如何不淚垂。春風桃李花開日，秋雨梧桐葉落時。
西宮南內多秋草，落葉滿階紅不掃。梨園弟子白髮新，椒房阿監青娥老。
夕殿螢飛思悄然，孤燈挑盡未成眠。遲遲鐘鼓初長夜，耿耿星河欲曙天。
鴛鴦瓦冷霜華重，翡翠衾寒誰與共。悠悠生死別經年，魂魄不曾來入夢。
臨邛道士鴻都客，能以精誠致魂魄。為感君王輾轉思，遂教方士殷勤覓。
排空馭氣奔如電，昇天入地求之遍。上窮碧落下黃泉，兩處茫茫皆不見。
忽聞海上有仙山，山在虛無縹渺間。樓閣玲瓏五雲起，其中綽約多仙子。
中有一人字太真，雪膚花貌參差是。金闕西廂叩玉扃，轉教小玉報雙成。
聞道漢家天子使，九華帳裡夢魂驚。攬衣推枕起徘佪，珠箔銀屏迤邐開。
雲鬢半偏新睡覺，花冠不整下堂來。風吹仙袂飄飄舉，猶似霓裳羽衣舞。
玉容寂寞淚闌乾，梨花一枝春帶雨。含情凝睇謝君王，一別音容兩渺茫。
昭陽殿裡恩愛絕，蓬萊宮中日月長。回頭下望人寰處，不見長安見塵霧。
惟將舊物表深情，鈿合金釵寄將去。釵留一股合一扇，釵擘黃金合分鈿。
但教心似金鈿堅，天上人間會相見。臨別殷勤重寄詞，詞中有誓兩心知。
七月七日長生殿，夜半無人私語時。在天願作比翼鳥，在地願為連理枝。
天長地久有時盡，此恨綿綿無絕期。

</BODY>
</HTML>

由上述範例可以看出，當 align 設定成 left 或 right 時，會有「文繞圖」的效果。

若要設定影像的透明度，可以使用 CSS 來達成，例如：

Example（imageOpacity01.htm）：

上述範例的完整原始檔案如下：

原始檔（imageOpacity01.htm）：（灰色區域按兩下即可拷貝）

<html>
<head>    
<title>如何顯示影像：設定透明度</title>
</head>
<body background="multimedia/paper.jpg">
opacity=100
<img src="multimedia/sbtree.gif" style="filter:alpha(opacity=100);">
opacity=80
<img src="multimedia/sbtree.gif" style="filter:alpha(opacity=80);">
opacity=60
<img src="multimedia/sbtree.gif" style="filter:alpha(opacity=60);">
opacity=40
<img src="multimedia/sbtree.gif" style="filter:alpha(opacity=40);">
opacity=20
<img src="multimedia/sbtree.gif" style="filter:alpha(opacity=20);">
</body>
</html>

其中 opacity 代表「不透明度」，其數值越高，代表影像越不透明。

利用 CSS 的指令，我們可對影像加一些特效，例如：

Example（imageOpacity02.htm）：

上述範例的完整原始檔案如下：

原始檔（imageOpacity02.htm）：（灰色區域按兩下即可拷貝）

<html>
<head>    
<title>如何顯示影像：設定透明度</title>
</head>
<center>
<body background="multimedia/paper.jpg">
<img src="multimedia/19980405/0001.jpg" width=30% style="filter:alpha(opacity=50);" onmouseover="this.filters.alpha.opacity=100"
onmouseout="this.filters.alpha.opacity=50">
<img src="multimedia/19980405/0002.jpg" width=30% style="filter:alpha(opacity=50);" onmouseover="this.filters.alpha.opacity=100"
onmouseout="this.filters.alpha.opacity=50">
<img src="multimedia/19980405/0003.jpg" width=30% style="filter:alpha(opacity=50);" onmouseover="this.filters.alpha.opacity=100"
onmouseout="this.filters.alpha.opacity=50">
<img src="multimedia/19980405/0004.jpg" width=30% style="filter:alpha(opacity=50);" onmouseover="this.filters.alpha.opacity=100"
onmouseout="this.filters.alpha.opacity=50">
<img src="multimedia/19980405/0005.jpg" width=30% style="filter:alpha(opacity=50);" onmouseover="this.filters.alpha.opacity=100"
onmouseout="this.filters.alpha.opacity=50">
</center>
</body>
</html>

HTML 簡介與應用