Albert 網路筆記

2014年9月5日星期五

[HTML] 影像地圖 Image Map MAP, AREA, SHAPE 使用範例

<IMG src=image.jpg useMap=#image border=0>

<MAP name=image>

　<AREA SHAPE=POLYGON coords=X,Y,X,Y,X,Y href=http://albertmarvinnetwork.blogspot.com/>

　<AREA SHAPE=RECT coords=X,Y,X,Y href=http://albertmarvinnetwork.blogspot.com/>

　<AREA SHAPE=CIRCLE coords=X,Y,半徑長度 href=http://albertmarvinnetwork.blogspot.com/>

</MAP>

將 HTML 表單按鈕變成圖片按鈕

<form id="form1" name="form1" method="post" action="" >

Submit Button

<input type="image" name="button" id="button" img src="button.jpg" onClick="document.form1.submit()" >

Reset Button

<input type="image" name="button" id="button" img src="button.jpg" onClick="document.form1.reset()" >

</form>

HTML INPUT 按鈕外觀, 自訂大小和顏色

<input name="button" style="background-color:#ffcccc; color: #0000ff; border:2 solid black ; font-size:30px;height:65px;width:350px;-webkit-appearance: button;" class="field" type="submit" value=" 按鈕 " onclick="location.href='http://albertmarvinnetwork.blogspot.com'">

<input name="button" style="background-color:#ffcccc; color: red; border:2 solid red ; font-size:30px;height:65px;width:350px;-webkit-appearance: button;" class="field" type="submit" value=" 按鈕 "/>

ASCII 字元表

二進制	十進制	十六進制	圖形	HTML
0010 0000	32	20	space
0010 0001	33	21	!	!
0010 0010	34	22	"	"
0010 0011	35	23	#	#
0010 0100	36	24	$	$
0010 0101	37	25	0%	%
0010 0110	38	26	&	&
0010 0111	39	27	'	'
0010 1000	40	28	(	(
0010 1001	41	29	)	)
0010 1010	42	2A	*	*
0010 1011	43	2B	+	+
0010 1100	44	2C	,	,
0010 1101	45	2D	-	-
0010 1110	46	2E	.	.
0010 1111	47	2F	/	/
0011 0000	48	30	0	0
0011 0001	49	31	1	1
0011 0010	50	32	2	2
0011 0011	51	33	3	3
0011 0100	52	34	4	4
0011 0101	53	35	5	5
0011 0110	54	36	6	6
0011 0111	55	37	7	7
0011 1000	56	38	8	8
0011 1001	57	39	9	9
0011 1010	58	3A	:	:
0011 1011	59	3B	;	;
0011 1100	60	3C	<	<
0011 1101	61	3D	=	=
0011 1110	62	3E	>	>
0011 1111	63	3F	?	?
0100 0000	64	40	@	@
0100 0001	65	41	A	A
0100 0010	66	42	B	B
0100 0011	67	43	C	C
0100 0100	68	44	D	D
0100 0101	69	45	E	E
0100 0110	70	46	F	F
0100 0111	71	47	G	G
0100 1000	72	48	H	H
0100 1001	73	49	I	I
0100 1010	74	4A	J	J
0100 1011	75	4B	K	K
0100 1100	76	4C	L	L
0100 1101	77	4D	M	M
0100 1110	78	4E	N	N
0100 1111	79	4F	O	O
0101 0000	80	50	P	P
0101 0001	81	51	Q	Q
0101 0010	82	52	R	R
0101 0011	83	53	S	S
0101 0100	84	54	T	T
0101 0101	85	55	U	U
0101 0110	86	56	V	V
0101 0111	87	57	W	W
0101 1000	88	58	X	X
0101 1001	89	59	Y	Y
0101 1010	90	5A	Z	Z
0101 1011	91	5B	[	[
0101 1100	92	5C	\	\
0101 1101	93	5D	]	]
0101 1110	94	5E	^	^
0101 1111	95	5F	_	_
0110 0000	96	60	`	`
0110 0001	97	61	a	a
0110 0010	98	62	b	b
0110 0011	99	63	c	c
0110 0100	100	64	d	d
0110 0101	101	65	e	e
0110 0110	102	66	f	f
0110 0111	103	67	g	g
0110 1000	104	68	h	h
0110 1001	105	69	i	i
0110 1010	106	6A	j	j
0110 1011	107	6B	k	k
0110 1100	108	6C	l	l
0110 1101	109	6D	m	m
0110 1110	110	6E	n	n
0110 1111	111	6F	o	o
0111 0000	112	70	p	p
0111 0001	113	71	q	q
0111 0010	114	72	r	r
0111 0011	115	73	s	s
0111 0100	116	74	t	t
0111 0101	117	75	u	u
0111 0110	118	76	v	v
0111 0111	119	77	w	w
0111 1000	120	78	x	x
0111 1001	121	79	y	y
0111 1010	122	7A	z	z
0111 1011	123	7B	{	{
0111 1100	124	7C	\|	\|
0111 1101	125	7D	}	}
0111 1110	126	7E	~	~

訂閱：文章 (Atom)