圖像可以使html頁面美觀生(shēng)動且富有生(shēng)機。浏覽器可以顯示的圖像格式有jpeg，bmp，gif。其中(zhōng)bmp文件存儲空間大(dà)，傳輸慢(màn)，不提倡用，常用的jpeg和gif格式的圖像相比較，jpeg圖像支持數百萬種顔色，即使在傳輸過程中(zhōng)丢失數據，也不會在質量上有明顯的不同，占位空間比gif大(dà)，gif圖像僅包括265色彩，雖然質量上沒有jpeg圖像高，但占位儲存空間小(xiǎo)，下(xià)載速度最快、支持動畫效果及背景色透明等特點。因此使用圖像美畫頁面可視情況而決定使用那種格式。
6-1 背景圖像的設定
在網頁中(zhōng)除了可以用單一(yī)的顔色做背景外(wài)，還可用圖像設置背景。
設置背景圖像的格式：
<body background= "image-url">
其中(zhōng) "image-url" 指圖像的位置。
實例：6-1.html
<html>
<head>
<title>設置背景圖像</title>
</head>
<body background="imge/11.gif">
<center>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font color="#006600" size="+6">盼望着，盼望着，東風來了，春天腳步近了.</font>
</p>
</center>
</body>
</html>
6-2 網頁中(zhōng)插入圖片标簽<img>
網頁中(zhōng)插入圖片用單标簽<img>，當浏覽器讀取到<img>标簽時，就會顯示此标簽所設定的圖像。如果要對插入的圖片進行修飾時，僅僅用這一(yī)個屬性是不夠的，還要配合其它屬性來完成。
插入圖片标簽<img>的屬性 屬 性 描 述
src 圖像的url的路徑
alt 提示文字
width 寬度 通常隻設爲圖片的真實大(dà)小(xiǎo)以免失真,改變圖片大(dà)小(xiǎo)最好用圖像工(gōng)具.
height 高度 通常隻設爲圖片的真實大(dà)小(xiǎo)以免失真,改變圖片大(dà)小(xiǎo)最好用圖像工(gōng)具.
dynsrc avi文件的url的路徑
loop 設定avi文件循環播放(fàng)的次數
loopdelay 設定avi文件循環播放(fàng)延遲
start 設定avi文件的播放(fàng)方式
lowsrc 設定低分(fēn)辨率圖片,若所加入的是一(yī)張很大(dà)的圖片，可先顯示圖片。
usemap 映像地圖
align 圖像和文字之間的排列屬性
border 邊框
hspace 水平間距
vlign 垂直間距
<IMG> 的格式及一(yī)般屬性設定：
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
6-1-1 普通插入圖片
實例：6-2-1.html
<html>
<head>
<title>普通插入圖片</title>
</head>
<body>
<BODY>
<CENTER>
<H2>愛在深秋</H2>
<IMG src="../../imge/6-5.gif">
</CENTER>
<WBR>
<p>秋雨無聲無息地下(xià)着。<BR>
飒飒的秋風不可一(yī)世地橫行在蕭條的郊外(wài)。無力與秋風抗争的枯葉，隻能帶着絲絲牽挂，無可奈何地飄離(lí)留戀的枝頭。秋蟬哀弱的殘聲逐漸地少了，地上落葉多了……<BR>
黃昏，我(wǒ)(wǒ)漫步在郊外(wài)的林間，想細細地品味秋雨的凄冷。<BR>
然而，“雨到深秋易作霖，蕭蕭難會此時心”，此時，又(yòu)有誰能聽(tīng)我(wǒ)(wǒ)訴說心中(zhōng)的那份情懷呢？<BR>
</p>
</WBR>
</body>
</html>
6-2-2 設定上下(xià)左右空白(bái)位置 hspace/vspace
實例：6-2-2.html
<html>
<head>
<title>設定圖像與文本之間的距離(lí)</title>
<body>
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
<font size="+3">秋雨無聲無息地下(xià)着。<BR>
飒飒的秋風不可一(yī)世地橫行在蕭條的郊外(wài)。無力與秋風抗争的枯葉，隻能帶着絲絲牽挂，無可奈何地飄離(lí)留戀的枝頭。秋蟬哀弱的殘聲逐漸地少了，地上落葉多了……<BR>
黃昏，我(wǒ)(wǒ)漫步在郊外(wài)的林間，想細細地品味秋雨的凄冷。
然而，“雨到深秋易作霖，蕭蕭難會此時心”，此時，又(yòu)有誰能聽(tīng)我(wǒ)(wǒ)訴說心中(zhōng)的那份情懷呢？</font><BR>
</body>
</html>
6-2-3 設定字畫對其方式
圖像和文字的之間的對齊是通過align屬性來設定的， align的對齊方式有兩種：即絕對對齊和相對對齊。絕對對齊方式的效果和文字一(yī)樣，隻有三種：居中(zhōng)（middle）、居左（left）、居右（right）。相對文字對齊方式是指圖像與一(yī)行文字的相對位置。
對其屬性align的設定
屬 性 值 對 齊 方 式
top 上對齊
middle 居中(zhōng)對齊
bottom 下(xià)對齊
left 左對齊
right 右對齊
實例：6-2-3.html
<html>
<head>
<title>控制圖像相對于文字基準線的水平對齊方式</title>
</head>
<body>
<img src="../../imge/6-2.jpg" align="left">
此圖像相對于文字基準線爲靠上對齊的多行文字<br>試想在圓月朦胧之夜，海棠是這樣的妩媚而嫣潤；枝頭的好鳥爲什麽卻雙栖而各夢呢？在這夜深人靜的當兒，那高踞着的一(yī)隻八哥兒，又(yòu)爲何盡撐着眼皮兒不肯睡去(qù)呢？他到底等什麽來着？舍不得那淡淡的月兒麽？舍不得那疏疏的簾兒麽？不，不，不，您得到簾下(xià)去(qù)找，您得向簾中(zhōng)去(qù)找——您該找着那卷簾人了？他的情韻風懷，原是這樣這樣的喲！朦胧的豈獨月呢；豈獨鳥呢？但是，咫尺天涯，教我(wǒ)(wǒ)如何耐得？<br>我(wǒ)(wǒ)拚着千呼萬喚；你能夠出來麽？
<br>這頁畫布局那樣經濟，設色那樣柔活，故精采足以動人。雖是區區尺幅，而情韻之厚，已足淪肌浃髓而有餘。我(wǒ)(wǒ)看了這畫。瞿然而驚：留戀之懷，不能自已。故将所感受的印象細細寫出，以志(zhì)這一(yī)段因緣。但我(wǒ)(wǒ)于中(zhōng)西的畫都是門外(wài)漢，所說的話(huà)不免爲内行所笑。——那也隻好由他了。
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="right">
此圖像相對于文字基準線爲靠上的多行文字對齊<br>試想在圓月朦胧之夜，海棠是這樣的妩媚而嫣潤；枝頭的好鳥爲什麽卻雙栖而各夢呢？在這夜深人靜的當兒，那高踞着的一(yī)隻八哥兒，又(yòu)爲何盡撐着眼皮兒不肯睡去(qù)呢？他到底等什麽來着？舍不得那淡淡的月兒麽？舍不得那疏疏的簾兒麽？不，不，不，您得到簾下(xià)去(qù)找，您得向簾中(zhōng)去(qù)找——您該找着那卷簾人了？他的情韻風懷，原是這樣這樣的喲！朦胧的豈獨月呢；豈獨鳥呢？但是，咫尺天涯，教我(wǒ)(wǒ)如何耐得？<br>我(wǒ)(wǒ)拚着千呼萬喚；你能夠出來麽？
<br>這頁畫布局那樣經濟，設色那樣柔活，故精采足以動人。雖是區區尺幅，而情韻之厚，已足淪肌浃髓而有餘。我(wǒ)(wǒ)看了這畫。瞿然而驚：留戀之懷，不能自已。故将所感受的印象細細寫出，以志(zhì)這一(yī)段因緣。但我(wǒ)(wǒ)于中(zhōng)西的畫都是門外(wài)漢，所說的話(huà)不免爲内行所笑。——那也隻好由他了。
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="top">
此圖像相對于文字基準線爲頂部單行對齊<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align=bottom>
此圖像相對于文字基準線爲底線單行對齊</p>
<p>
<hr color="#00ff00">
<p><img src="../../imge/6-2.jpg" align="middle">
此圖像相對于文字基準線爲置中(zhōng)單行對齊</p>
<p> </p>
<p><a href="20170711122112.html" onClick="javascript:window.history.back()">返回</a></p>
<p>
</body>
</html>
6-2-4 圖片大(dà)小(xiǎo)設定
實例：6-2-4.html
<html>
<head>
<title>圖像大(dà)小(xiǎo)的設定</title>
</head>
<body>
<center>
<p>
縮小(xiǎo)圖像
<p><img src="../../imge/6-3.gif" width="350" height="200">
<p>原圖顯示
<p>
<img src="../../imge/6-3.gif" width="400" height="236">
<p>放(fàng)大(dà)圖像
<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 圖像的超鏈接
圖像的鏈接和文字的鏈接方法是一(yī)樣的，都是用<a>标簽來完成，隻要将<img>标簽放(fàng)在<a>和</a>隻見就可以了。用圖像鏈接的圖片的上有藍(lán)色的邊框，這個邊框顔色也可以在<body>标簽中(zhōng)設定。
實例：6-3-1.html
<html>
<head>
<title>使用圖像爲選取的對象</title>
</head>
<body>
<p align="center"> </p>
<h1 align="center">圖片的超鏈接</h1>
<P>
<center>
<a href="http://www.sohu.com/" target="_blank"><img alt="搜狐網站" src="../../imge/logo[1].gif"></a><p>
<a href="http://www.baidu.com/"><img alt="百度搜索" src="../../imge/logo[2].gif"></a><p>
<a href="http://www.sina.com.cn"><img alt="新浪網站" src="../../imge/logo(3).gif"></a>
</center>
</body>
</html>
6-3-2 圖像的影像地圖超鏈接
在HTML中(zhōng)還可以把圖片劃分(fēn)成多個熱點區域，每一(yī)個熱點域鏈接到不同網頁的資(zī)源。這種效果的實質是把一(yī)幅圖片劃分(fēn)爲不同的熱點區域，再讓不同的區域進行超鏈接。這就是影像地圖。要完成地圖區域超鏈接要用到三種标簽：<img><map><area>下(xià)面分(fēn)别介紹這些标簽的用法：
影像地圖（Image Map）标簽的使用格式：
<img src="圖形文件名" usemap="#圖的名稱">
<!-- 插入圖片時要在<img>标記中(zhōng)設置參數usemap="#圖的名稱" ismap，以表示對圖像地圖（圖的名稱）的引用；-->
<map name="圖的名稱">
<!--用<map>标記設定圖像地圖的作用區域，并用name屬性爲圖像起一(yī)個名字-->
<area shape=形狀 coords=區域座标列表 href="URL資(zī)源地址">
......可根據需要定義多少個熱點區域
<area shape=形狀 coords=區域座标列表 href="URL資(zī)源地址">
</map>
【1】shape -- 定義熱點形狀
shape=rect： 矩形
shape=circle：圓形
shape=poly： 多邊形
【2】coords -- 定義區域點的坐标
a.矩形：必須使用四個數字，前兩個數字爲左上角座标，後兩個數字爲右下(xià)角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圓形：必須使用三個數字，前兩個數字爲圓心的座标，最後一(yī)個數字爲半徑長度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意圖形（多邊形）：将圖形之每一(yī)轉折點座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
在制作本文介紹的效果時應注意的幾點：
1、在<img>标記不要忘記設置usemap、ismap參數，且usemap的參數值必須與<map>标記中(zhōng)的name參數值相同，也就是說，“圖像地圖名稱”要一(yī)緻；
2、同一(yī)“圖像地圖”中(zhōng)的所有熱點區域都要在圖像地圖的範圍内，即所有<area>标記均要在<map>與</map>之間；
3、在<area>标記中(zhōng)的 cords 參數設定的坐标格式要與shape參數設定的作用區域形狀配套，避免出現在shape參數設置的矩形作用區域，而在cords 中(zhōng)設置的卻是多邊形區域頂點坐标的現象出現。
實例 6-3-2.html
<html>
<head>
<title>影像地圖</title>
</head>
<body>
<img src="../../imge/yxlj.jpg" alt="影像地圖" hspace="10" align="left" usemap="#yxdt" border="0">
<map name="yxdt">
<area shape="rect" coords="80,69,180,120" href="http://www.baidu.com/" target="_blank" alt="點擊鏈接到百度搜索">
<area shape="circle" coords="283,95,45" href="http://www.sina.com.cn" target="_blank" alt="點擊鏈接到新浪網站">
</map>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="20170711122112.html" onClick="javascript:window.history.back()">返回</a></p>
</body>
</html>
6-4 用<img>标簽插入avi文件
格式：<img dynsrc="avi文件地址">
<img>标簽插入avi文件的屬性 屬 性 描 述
dynsrc 指定avi文件所在路徑
loop 設定avi文件循環次數
loopdelay 設定avi文件循環延遲
start 設定文件播放(fàng)方式fileopen/mouseover(網頁打開(kāi)時即播放(fàng)/當鼠标滑到avi文件時播放(fàng)）
實例：6-4.html
<html>
<head>
<title>設定圖像的邊框</title>
</head>
<body>
<center>
<p align="center">
<img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover">
</p>
</center>
</body>
</html>
6-1 背景圖像的設定
在網頁中(zhōng)除了可以用單一(yī)的顔色做背景外(wài)，還可用圖像設置背景。
設置背景圖像的格式：
<body background= "image-url">
其中(zhōng) "image-url" 指圖像的位置。
實例：6-1.html
<html>
<head>
<title>設置背景圖像</title>
</head>
<body background="imge/11.gif">
<center>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font color="#006600" size="+6">盼望着，盼望着，東風來了，春天腳步近了.</font>
</p>
</center>
</body>
</html>
6-2 網頁中(zhōng)插入圖片标簽<img>
網頁中(zhōng)插入圖片用單标簽<img>，當浏覽器讀取到<img>标簽時，就會顯示此标簽所設定的圖像。如果要對插入的圖片進行修飾時，僅僅用這一(yī)個屬性是不夠的，還要配合其它屬性來完成。
插入圖片标簽<img>的屬性 屬 性 描 述
src 圖像的url的路徑
alt 提示文字
width 寬度 通常隻設爲圖片的真實大(dà)小(xiǎo)以免失真,改變圖片大(dà)小(xiǎo)最好用圖像工(gōng)具.
height 高度 通常隻設爲圖片的真實大(dà)小(xiǎo)以免失真,改變圖片大(dà)小(xiǎo)最好用圖像工(gōng)具.
dynsrc avi文件的url的路徑
loop 設定avi文件循環播放(fàng)的次數
loopdelay 設定avi文件循環播放(fàng)延遲
start 設定avi文件的播放(fàng)方式
lowsrc 設定低分(fēn)辨率圖片,若所加入的是一(yī)張很大(dà)的圖片，可先顯示圖片。
usemap 映像地圖
align 圖像和文字之間的排列屬性
border 邊框
hspace 水平間距
vlign 垂直間距
<IMG> 的格式及一(yī)般屬性設定：
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
6-1-1 普通插入圖片
實例：6-2-1.html
<html>
<head>
<title>普通插入圖片</title>
</head>
<body>
<BODY>
<CENTER>
<H2>愛在深秋</H2>
<IMG src="../../imge/6-5.gif">
</CENTER>
<WBR>
<p>秋雨無聲無息地下(xià)着。<BR>
飒飒的秋風不可一(yī)世地橫行在蕭條的郊外(wài)。無力與秋風抗争的枯葉，隻能帶着絲絲牽挂，無可奈何地飄離(lí)留戀的枝頭。秋蟬哀弱的殘聲逐漸地少了，地上落葉多了……<BR>
黃昏，我(wǒ)(wǒ)漫步在郊外(wài)的林間，想細細地品味秋雨的凄冷。<BR>
然而，“雨到深秋易作霖，蕭蕭難會此時心”，此時，又(yòu)有誰能聽(tīng)我(wǒ)(wǒ)訴說心中(zhōng)的那份情懷呢？<BR>
</p>
</WBR>
</body>
</html>
6-2-2 設定上下(xià)左右空白(bái)位置 hspace/vspace
實例：6-2-2.html
<html>
<head>
<title>設定圖像與文本之間的距離(lí)</title>
<body>
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
<font size="+3">秋雨無聲無息地下(xià)着。<BR>
飒飒的秋風不可一(yī)世地橫行在蕭條的郊外(wài)。無力與秋風抗争的枯葉，隻能帶着絲絲牽挂，無可奈何地飄離(lí)留戀的枝頭。秋蟬哀弱的殘聲逐漸地少了，地上落葉多了……<BR>
黃昏，我(wǒ)(wǒ)漫步在郊外(wài)的林間，想細細地品味秋雨的凄冷。
然而，“雨到深秋易作霖，蕭蕭難會此時心”，此時，又(yòu)有誰能聽(tīng)我(wǒ)(wǒ)訴說心中(zhōng)的那份情懷呢？</font><BR>
</body>
</html>
6-2-3 設定字畫對其方式
圖像和文字的之間的對齊是通過align屬性來設定的， align的對齊方式有兩種：即絕對對齊和相對對齊。絕對對齊方式的效果和文字一(yī)樣，隻有三種：居中(zhōng)（middle）、居左（left）、居右（right）。相對文字對齊方式是指圖像與一(yī)行文字的相對位置。
對其屬性align的設定
屬 性 值 對 齊 方 式
top 上對齊
middle 居中(zhōng)對齊
bottom 下(xià)對齊
left 左對齊
right 右對齊
實例：6-2-3.html
<html>
<head>
<title>控制圖像相對于文字基準線的水平對齊方式</title>
</head>
<body>
<img src="../../imge/6-2.jpg" align="left">
此圖像相對于文字基準線爲靠上對齊的多行文字<br>試想在圓月朦胧之夜，海棠是這樣的妩媚而嫣潤；枝頭的好鳥爲什麽卻雙栖而各夢呢？在這夜深人靜的當兒，那高踞着的一(yī)隻八哥兒，又(yòu)爲何盡撐着眼皮兒不肯睡去(qù)呢？他到底等什麽來着？舍不得那淡淡的月兒麽？舍不得那疏疏的簾兒麽？不，不，不，您得到簾下(xià)去(qù)找，您得向簾中(zhōng)去(qù)找——您該找着那卷簾人了？他的情韻風懷，原是這樣這樣的喲！朦胧的豈獨月呢；豈獨鳥呢？但是，咫尺天涯，教我(wǒ)(wǒ)如何耐得？<br>我(wǒ)(wǒ)拚着千呼萬喚；你能夠出來麽？
<br>這頁畫布局那樣經濟，設色那樣柔活，故精采足以動人。雖是區區尺幅，而情韻之厚，已足淪肌浃髓而有餘。我(wǒ)(wǒ)看了這畫。瞿然而驚：留戀之懷，不能自已。故将所感受的印象細細寫出，以志(zhì)這一(yī)段因緣。但我(wǒ)(wǒ)于中(zhōng)西的畫都是門外(wài)漢，所說的話(huà)不免爲内行所笑。——那也隻好由他了。
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="right">
此圖像相對于文字基準線爲靠上的多行文字對齊<br>試想在圓月朦胧之夜，海棠是這樣的妩媚而嫣潤；枝頭的好鳥爲什麽卻雙栖而各夢呢？在這夜深人靜的當兒，那高踞着的一(yī)隻八哥兒，又(yòu)爲何盡撐着眼皮兒不肯睡去(qù)呢？他到底等什麽來着？舍不得那淡淡的月兒麽？舍不得那疏疏的簾兒麽？不，不，不，您得到簾下(xià)去(qù)找，您得向簾中(zhōng)去(qù)找——您該找着那卷簾人了？他的情韻風懷，原是這樣這樣的喲！朦胧的豈獨月呢；豈獨鳥呢？但是，咫尺天涯，教我(wǒ)(wǒ)如何耐得？<br>我(wǒ)(wǒ)拚着千呼萬喚；你能夠出來麽？
<br>這頁畫布局那樣經濟，設色那樣柔活，故精采足以動人。雖是區區尺幅，而情韻之厚，已足淪肌浃髓而有餘。我(wǒ)(wǒ)看了這畫。瞿然而驚：留戀之懷，不能自已。故将所感受的印象細細寫出，以志(zhì)這一(yī)段因緣。但我(wǒ)(wǒ)于中(zhōng)西的畫都是門外(wài)漢，所說的話(huà)不免爲内行所笑。——那也隻好由他了。
<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align="top">
此圖像相對于文字基準線爲頂部單行對齊<p>
<hr color="#00ff00">
<img src="../../imge/6-2.jpg" align=bottom>
此圖像相對于文字基準線爲底線單行對齊</p>
<p>
<hr color="#00ff00">
<p><img src="../../imge/6-2.jpg" align="middle">
此圖像相對于文字基準線爲置中(zhōng)單行對齊</p>
<p> </p>
<p><a href="20170711122112.html" onClick="javascript:window.history.back()">返回</a></p>
<p>
</body>
</html>
6-2-4 圖片大(dà)小(xiǎo)設定
實例：6-2-4.html
<html>
<head>
<title>圖像大(dà)小(xiǎo)的設定</title>
</head>
<body>
<center>
<p>
縮小(xiǎo)圖像
<p><img src="../../imge/6-3.gif" width="350" height="200">
<p>原圖顯示
<p>
<img src="../../imge/6-3.gif" width="400" height="236">
<p>放(fàng)大(dà)圖像
<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 圖像的超鏈接
圖像的鏈接和文字的鏈接方法是一(yī)樣的，都是用<a>标簽來完成，隻要将<img>标簽放(fàng)在<a>和</a>隻見就可以了。用圖像鏈接的圖片的上有藍(lán)色的邊框，這個邊框顔色也可以在<body>标簽中(zhōng)設定。
實例：6-3-1.html
<html>
<head>
<title>使用圖像爲選取的對象</title>
</head>
<body>
<p align="center"> </p>
<h1 align="center">圖片的超鏈接</h1>
<P>
<center>
<a href="http://www.sohu.com/" target="_blank"><img alt="搜狐網站" src="../../imge/logo[1].gif"></a><p>
<a href="http://www.baidu.com/"><img alt="百度搜索" src="../../imge/logo[2].gif"></a><p>
<a href="http://www.sina.com.cn"><img alt="新浪網站" src="../../imge/logo(3).gif"></a>
</center>
</body>
</html>
6-3-2 圖像的影像地圖超鏈接
在HTML中(zhōng)還可以把圖片劃分(fēn)成多個熱點區域，每一(yī)個熱點域鏈接到不同網頁的資(zī)源。這種效果的實質是把一(yī)幅圖片劃分(fēn)爲不同的熱點區域，再讓不同的區域進行超鏈接。這就是影像地圖。要完成地圖區域超鏈接要用到三種标簽：<img><map><area>下(xià)面分(fēn)别介紹這些标簽的用法：
影像地圖（Image Map）标簽的使用格式：
<img src="圖形文件名" usemap="#圖的名稱">
<!-- 插入圖片時要在<img>标記中(zhōng)設置參數usemap="#圖的名稱" ismap，以表示對圖像地圖（圖的名稱）的引用；-->
<map name="圖的名稱">
<!--用<map>标記設定圖像地圖的作用區域，并用name屬性爲圖像起一(yī)個名字-->
<area shape=形狀 coords=區域座标列表 href="URL資(zī)源地址">
......可根據需要定義多少個熱點區域
<area shape=形狀 coords=區域座标列表 href="URL資(zī)源地址">
</map>
【1】shape -- 定義熱點形狀
shape=rect： 矩形
shape=circle：圓形
shape=poly： 多邊形
【2】coords -- 定義區域點的坐标
a.矩形：必須使用四個數字，前兩個數字爲左上角座标，後兩個數字爲右下(xià)角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圓形：必須使用三個數字，前兩個數字爲圓心的座标，最後一(yī)個數字爲半徑長度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意圖形（多邊形）：将圖形之每一(yī)轉折點座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
在制作本文介紹的效果時應注意的幾點：
1、在<img>标記不要忘記設置usemap、ismap參數，且usemap的參數值必須與<map>标記中(zhōng)的name參數值相同，也就是說，“圖像地圖名稱”要一(yī)緻；
2、同一(yī)“圖像地圖”中(zhōng)的所有熱點區域都要在圖像地圖的範圍内，即所有<area>标記均要在<map>與</map>之間；
3、在<area>标記中(zhōng)的 cords 參數設定的坐标格式要與shape參數設定的作用區域形狀配套，避免出現在shape參數設置的矩形作用區域，而在cords 中(zhōng)設置的卻是多邊形區域頂點坐标的現象出現。
實例 6-3-2.html
<html>
<head>
<title>影像地圖</title>
</head>
<body>
<img src="../../imge/yxlj.jpg" alt="影像地圖" hspace="10" align="left" usemap="#yxdt" border="0">
<map name="yxdt">
<area shape="rect" coords="80,69,180,120" href="http://www.baidu.com/" target="_blank" alt="點擊鏈接到百度搜索">
<area shape="circle" coords="283,95,45" href="http://www.sina.com.cn" target="_blank" alt="點擊鏈接到新浪網站">
</map>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="20170711122112.html" onClick="javascript:window.history.back()">返回</a></p>
</body>
</html>
6-4 用<img>标簽插入avi文件
格式：<img dynsrc="avi文件地址">
<img>标簽插入avi文件的屬性 屬 性 描 述
dynsrc 指定avi文件所在路徑
loop 設定avi文件循環次數
loopdelay 設定avi文件循環延遲
start 設定文件播放(fàng)方式fileopen/mouseover(網頁打開(kāi)時即播放(fàng)/當鼠标滑到avi文件時播放(fàng)）
實例：6-4.html
<html>
<head>
<title>設定圖像的邊框</title>
</head>
<body>
<center>
<p align="center">
<img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover">
</p>
</center>
</body>
</html>
文章來源：http://longka.flasher123.com/zy/index/6-1.html
475003427