Computer: Makeuper: HTML: Ex01: Difference between revisions
No edit summary |
回復至未受 Spammer 破壞前 |
| (One intermediate revision by one other user not shown) | |
(No difference)
| |
Latest revision as of 17:39, 23 February 2006
回到 Computer ‧ 回到 Computer: Makeuper ‧ 回到 Computer: Makeuper: HTML
主題：指定圖片某一區域連向某處的語法
- - - - - - - - - - - - - - - - -
<body>
<P><IMG src="html_usemap_01.PNG"
usemap="#map1" style="border:1px solid red;">
<P>This is a navigation bar.
<MAP name="map1">
<AREA href="html_usemap_01.html"
alt=" Rectangle 矩形 "
title=" Rectangle 矩形 "
shape="rect"
coords="141,40, 252,116">
<AREA href="html_usemap_01.html"
alt=" Circle 圓形 "
title=" Circle 圓形 "
shape="circle"
coords="91,238, 45">
<AREA href="html_usemap_01.html"
alt=" Poly 多邊形 "
title=" Poly 多邊形 "
shape="poly"
coords="189,297, 143,342, 229,337">
</MAP>
</body>
- - - - - - - - - - - - - - - - -
http://home.pchome.com.tw/young/kouyu/winiAlienHacker/pub/test/html_usemap_00.html
右邊那個矩形是畫好看的，不必理會。
本例中的語法分做三個部分。
第一個為圖片部分，IMG 即是開始在宣告使用圖片，src 則為其存放路徑，usemap 即是在引入宣告本圖片哪塊區域指向何處的…宣告？（汗）Style 那個只是在指定其外框的粗細、樣式跟顏色而已。
第二個是「<P>This is a navigation bar.」，這玩意沒啥用處，不必理會沒關係。（大汗）
第三部分就是重頭戲了，這個記得名稱別宣告錯誤就行了，另外正確的名稱前是不必加「#」的，雖然在 IMG 的標籤中，指定 usemap 時有加「#」，不過那是因為它是在「指定」該宣告才要這麼寫的，這是標準。但是也就只有IE才會把加了「#」的當成正確的命名而已，請不要再誤用了（誠懇拜託各位）。其它的會在下面作詳細說明。另外 Alt 是當圖片顯示不出來時用的替代文字，而 TITLE 才是正確的註解文字，請不要搞混了。（IE的遺毒呀）
大致上屬性跟數字的指定應該是這樣子的規則。
shape=" rect | circle | poly "
rect=" Rectangle 矩形 "
coords="141,40, 252,116"
兩者一組，前兩者為左上端點，後兩者為右下端點。
circle=" Circle 圓形 "
coords="91,238, 45"
前兩者為圓心，後一者為半徑長。
poly=" Poly 多邊形 "
coords="189,297, 143,342, 229,337"
兩者一組，代表各個端點的 X Y 軸位置。
W3C相關講義
http://www.w3.org/TR/html401/struct/objects.html#adef-usemap