HTML影像
一般我們用到的就是插入圖片,將圖片多為背景,再者將圖片當(dāng)作連結(jié)。牽涉到的標(biāo)籤就是< img> 接下來(lái)我們就動(dòng)手開(kāi)始寫(xiě)一個(gè)HTML檔案加深了解 首先我們用瀏覽器在網(wǎng)頁(yè)上下載幾張圖片(放到和HTML檔案一個(gè)資料夾中)供後面使用。
1.先設(shè)定一張圖片為網(wǎng)頁(yè)背景圖片
在body屬性中加入background屬性加入背景圖片
#2.舉例插入一張圖片寫(xiě)法如下
#<img src="路徑加檔名">
插入圖片以後:?
這時(shí)我們可以看出,字體和圖片的低端是對(duì)其的,下面我們就來(lái)調(diào)整下對(duì)其方式
3.新增屬性調(diào)整圖片的對(duì)其方式
#在< img>標(biāo)籤中加入align屬性,調(diào)整對(duì)其。 相對(duì)習(xí)題的上下可以加的參數(shù)有bottom、middle、top,預(yù)設(shè)就是我們剛看見(jiàn)的bottom 相對(duì)字體左右可加的參數(shù)有right,left預(yù)設(shè)為right
下面我們直接來(lái)比較下:
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>let's have an example<img src="./julizi.png"></p> <p> align top<img src="./julizi.png" align="top" ></p> <p>align middle<img src="./julizi.png" align="middle"></p> <p>align left<img src="./julizi.png" align="left" ></p> </body> </html>
4.調(diào)整插入圖片尺寸?
大多數(shù)的尺寸都沒(méi)有那麼合適,直接插入以後會(huì)破換整體頁(yè)面的效果。所以在插入圖片時(shí),很有必要控制其尺寸,這是很容易辦到的,就孩子需要在< img>標(biāo)籤中加入width height 兩個(gè)屬性。 那我們順勢(shì)就控制下上面的那幾副圖吧
width="80" height="80"
(當(dāng)然,我還會(huì)調(diào)整了字體大?。?/p>
5.創(chuàng)建圖像映射
在這之前我們動(dòng)手試驗(yàn)過(guò)將圖片作為鏈接來(lái)使用,觸發(fā)鏈接的方式就是點(diǎn)擊圖片的任何地方都可以連結(jié)到跳轉(zhuǎn)地址,有時(shí)我們需要實(shí)現(xiàn),點(diǎn)擊圖片的不同地方跳到不同的地方。意思就是,一張圖片我們可以建立一個(gè)有可供點(diǎn)擊區(qū)域的圖像地圖,其中每個(gè)區(qū)域就是一個(gè)超連結(jié)。牽涉到的標(biāo)籤就是< map>標(biāo)籤,用來(lái)指定圖片,< area>用來(lái)指定超連結(jié)區(qū)域
<img src="xx.jpg" usemap="#mp"/> <map name="mp" id="mp"> <area> ... ... ... </area> </map>
這裡以一張圖片作為地圖, 在< area>標(biāo)籤中我們會(huì)涉及到shape ,coords, href屬性,分別用來(lái)指定超鏈接區(qū)域形狀,超鏈接區(qū)域坐標(biāo),還有超鏈接跳轉(zhuǎn)地。
這是具體實(shí)現(xiàn)內(nèi)容
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>tap the li zi </p> <img src="./julizi.png" usemap="#lizi"/> <map name="lizi"> <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank" </map> </body> </html>
然後,當(dāng)我們點(diǎn)擊小松鼠舉起的栗子,你就會(huì)看見(jiàn)跟多栗子?
shape屬性的值可以是:rect(矩形)、circle(圓形)、poly(多邊形)和default(整個(gè)影像區(qū)域)。這裡採(cǎi)用的是矩形。
coords屬性對(duì)於矩形而言,coords有4個(gè)值,分別用逗號(hào)隔開(kāi),表示矩形區(qū)域左上角x座標(biāo)、左上角y座標(biāo)、右下角x座標(biāo)和右下角y座標(biāo),這裡取得座標(biāo)的方式,就用截圖工具幫忙就好。