Computer: Makeuper: HTML: Ex01: Difference between revisions

From TestingMediawiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 6: Line 6:


主題:指定圖片某一區域連向某處的語法
主題:指定圖片某一區域連向某處的語法
<font color="red">注意,目前教的這個 IE 似乎不能使用,請知道如何讓 IE 看到的人幫忙寫個 IE 用的吧,感謝。</font>


[[Image:Html_usemap_01.PNG]]
[[Image:Html_usemap_01.PNG]]
Line 13: Line 15:
<body>
<body>


<P><OBJECT data="html_usemap_01.PNG" type="image/png" usemap="#map1">
<P><OBJECT data="html_usemap_01.PNG" type="image/png"
usemap="#map1" style="border:1px solid red;">
   <P>This is a navigation bar.
   <P>This is a navigation bar.
   </OBJECT>
   </OBJECT>
Line 19: Line 22:
<MAP name="map1">
<MAP name="map1">
  <AREA href="html_usemap_01.html"  
  <AREA href="html_usemap_01.html"  
           alt="Access Guide"  
           alt=" Rectangle 矩形 "
          title=" Rectangle 矩形 "
           shape="rect"  
           shape="rect"  
           coords="141,40,252,116">
           coords="141,40, 252,116">
  <AREA href="html_usemap_01.html"  
  <AREA href="html_usemap_01.html"  
           alt="Search"  
           alt=" Circle 圓形 "  
           shape="rect"
           title=" Circle 圓形 "
          coords="0,0,0,0">
<AREA href="html_usemap_01.html"
          alt="Go"  
           shape="circle"
           shape="circle"
           coords="0,0,0,0">
           coords="91,238, 45">
  <AREA href="html_usemap_01.html"  
  <AREA href="html_usemap_01.html"  
           alt="Top Ten"  
           alt=" Poly 多邊形 "
          title=" Poly 多邊形 "
           shape="poly"  
           shape="poly"  
           coords="189,297,143,342,229,337">
           coords="189,297, 143,342, 229,337">
</MAP>
</MAP>


Line 42: Line 44:
http://home.pchome.com.tw/young/kouyu/winiAlienHacker/pub/test/html_usemap_00.html
http://home.pchome.com.tw/young/kouyu/winiAlienHacker/pub/test/html_usemap_00.html


因為太懶了,所以只有上面的方形跟下面的三角形有用而已。
右邊那個矩形是畫好看的,不必理會。<br>
大致上屬性跟數字的指定應該是這樣子的規則。<br>
 
shape=" rect | circle | poly "<br>
 
rect=" Rectangle 矩形 "<br>
coords="141,40, 252,116"<br>
兩者一組,前兩者為左上端點,後兩者為右下端點。<br>


大致上數字的指定應該是這樣子的規則。
circle=" Circle 圓形 "<br>
coords="91,238, 45"<br>
前兩者為圓心,後一者為半徑長。<br>


coords=" 141,40, 252,116 "
poly=" Poly 多邊形 "<br>
(x,y) = (141,40) = (252,116)
coords="189,297, 143,342, 229,337"<br>
兩者一組,代表各個端點的 X Y 軸位置。<br>


還可以用成三角形的這樣,只要指定三個點的位置就好了。
----


不規則形狀不清楚,不過似乎不能簡單地做出圓形的樣子。
W3C相關講義


http://www.w3.org/TR/html401/struct/objects.html#adef-usemap
http://www.w3.org/TR/html401/struct/objects.html#adef-usemap


----
----

Revision as of 21:02, 29 July 2004


回到 Computer ‧ 回到 Computer: Makeuper ‧ 回到 Computer: Makeuper: HTML


主題:指定圖片某一區域連向某處的語法

注意,目前教的這個 IE 似乎不能使用,請知道如何讓 IE 看到的人幫忙寫個 IE 用的吧,感謝。

- - - - - - - - - - - - - - - - -

<body>

<P><OBJECT data="html_usemap_01.PNG" type="image/png"
 usemap="#map1" style="border:1px solid red;">
   <P>This is a navigation bar.
   </OBJECT>

<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

右邊那個矩形是畫好看的,不必理會。
大致上屬性跟數字的指定應該是這樣子的規則。

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