aタグによるボタン


 

ボタン画像

記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 /  Ajaxの参考書 /  HTMLの参考書 /  CSSの参考書

 


htmlソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>aタグによるボタン</title>
<link href="/gudon/css/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	a.image_button{
		display:block;
	 	width: 115px; /*ボタンの横サイズをピクセル数で*/
		height: 29px; /*ボタンの縦サイズをピクセル数で*/
		background:url(/gudon/images/sample/button_sample2.png) no-repeat 0px 0px;
		text-indent:-9999em;
	}
	a:hover{ background-position: 0 -29px; }/*ボタンの縦サイズで変更してください*/
	a:active{ background-position: 0 -58px; }/*ボタンの縦サイズで変更してください*
</style>
</head>
<body>
<h1>aタグによるボタン</h1>
<hr />
<form name="form1" action="test1.php">
	<input name="textbox1" type="text" value="テキストボックス"/>
    <a class="image_button" href="javascript:void(0)" onclick="document.form1.submit();">
    	&nbsp;
    </a>
</form>
<hr />
ボタン画像<br />
<img src="/gudon/images/sample/button_sample2.png" style="border: solid;" />
</body>
</html>