Computer: Makeuper: HTML: Ex01 - Revision history

Wini: 回復至未受 Spammer 破壞前

2006-02-23T17:39:03Z

回復至未受 Spammer 破壞前

Show changes

222.118.74.62 at 02:14, 23 February 2006

2006-02-23T02:14:06Z

Show changes

218.165.193.32 at 12:54, 30 July 2004

2004-07-30T12:54:52Z

← Older revision		Revision as of 12:54, 30 July 2004
Line 41:		Line 41:
	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>~~		本例中的語法分做三個部分。

			第一個為圖片部分，IMG 即是開始在宣告使用圖片，src 則為其存放路徑，usemap 即是在引入宣告本圖片哪塊區域指向何處的…宣告？（汗）Style 那個只是在指定其外框的粗細、樣式跟顏色而已。

			第二個是「<nowiki><P>This is a navigation bar.</nowiki>」，這玩意沒啥用處，不必理會沒關係。（大汗）

			第三部分就是重頭戲了，這個記得名稱別宣告錯誤就行了，另外正確的名稱前是<font color="red">不必加「#」</font>的，雖然在 IMG 的標籤中，指定 usemap 時有加「#」，不過那是因為它是在「指定」該宣告才要這麼寫的，這是標準。但是也就只有IE才會把加了「#」的當成正確的命名而已，請不要再誤用了（誠懇拜託各位）。其它的會在下面作詳細說明。另外 Alt 是當圖片顯示不出來時用的替代文字，而 TITLE 才是正確的註解文字，請不要搞混了。（IE的遺毒呀）

			大致上屬性跟數字的指定應該是這樣子的規則。

			shape=" rect \| circle \| poly "

	rect=" Rectangle 矩形 "<br>		rect=" Rectangle 矩形 "<br>

Wini at 21:37, 29 July 2004

2004-07-29T21:37:23Z

← Older revision		Revision as of 21:37, 29 July 2004
Line 6:		Line 6:

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

	~~<font color="red">注意，目前教的這個 IE 似乎不能使用，請知道如何讓 IE 看到的人幫忙寫個 IE 用的吧，感謝。</font>~~

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

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

	<MAP name="map1">		<MAP name="map1">

Wini at 21:02, 29 July 2004

2004-07-29T21:02:43Z

← Older revision		Revision as of 21:02, 29 July 2004
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

	----		----

Wini at 14:53, 29 July 2004

2004-07-29T14:53:51Z

← Older revision		Revision as of 14:53, 29 July 2004
Line 9:		Line 9:
	[[Image:Html_usemap_01.PNG]]		[[Image:Html_usemap_01.PNG]]

	~~= = = = = = = = = = = = = = = = =~~		- - - - - - - - - - - - - - - - -
	<font color="green"><pre><nowiki>		<font color="green"><pre><nowiki>
	<body>		<body>
Line 38:		Line 38:
	</body>		</body>
	</nowiki></pre></font>		</nowiki></pre></font>
	~~= = = = = = = = = = = = = = = = =~~		- - - - - - - - - - - - - - - - -

	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

Wini at 14:47, 29 July 2004

2004-07-29T14:47:48Z

New page

----

回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]] ‧ 回到 [[Computer: Makeuper: HTML]]

----

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

[[Image:Html_usemap_01.PNG]]

= = = = = = = = = = = = = = = = =
<font color="green"><pre><nowiki>
<body>

<P><OBJECT data="html_usemap_01.PNG" type="image/png" usemap="#map1">
<P>This is a navigation bar.
</OBJECT>

<MAP name="map1">
<AREA href="html_usemap_01.html"
alt="Access Guide"
shape="rect"
coords="141,40,252,116">
<AREA href="html_usemap_01.html"
alt="Search"
shape="rect"
coords="0,0,0,0">
<AREA href="html_usemap_01.html"
alt="Go"
shape="circle"
coords="0,0,0,0">
<AREA href="html_usemap_01.html"
alt="Top Ten"
shape="poly"
coords="189,297,143,342,229,337">
</MAP>

</body>
</nowiki></pre></font>
= = = = = = = = = = = = = = = = =

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

因為太懶了，所以只有上面的方形跟下面的三角形有用而已。

大致上數字的指定應該是這樣子的規則。

coords=" 141,40, 252,116 "
(x,y) = (141,40) = (252,116)

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

不規則形狀不清楚，不過似乎不能簡單地做出圓形的樣子。

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

----