---

<input>タグと画像

<input>タグにはtype属性(オプション)でimageを指定し、src属性でイメージを読み込むと、そのイメージの座標をnameで指定した名前に｢.x｣を付けX座標として、｢.y｣を付けY座標としてサーバへ送る機能があります。この機能を利用すればクリッカブルマップのような効果を得られます。

画像の座標情報を得る方法

	
	
	<form method="post" action="/cgi-bin/post-query">
	
	<input name="ZoomTest" type="image" src="../images/butterfly.gif">
	
	<ul>
	<li> <input type="radio" name="zoom" value="2" checked> 2倍に拡大
	<li> <input type="radio" name="zoom" value="4"> 4倍に拡大
	<li> <input type="radio" name="zoom" value="8"> 8倍に拡大
	</ul>
	
	このボタンを押すとリセットします: <input type="reset">
	
	</form>
	
	

2倍に拡大 4倍に拡大 8倍に拡大 このボタンを押すとリセットします:

上記の場合、"ZoomTest.x"にX座標、"ZoomTest.y"にY座標が入れられます。

ボタンをイメージにする

<input>のsubmitボタンでは味気ないので、ボタンをイメージにしたい場合があります。その時に、この<input type=image>タグが利用できます。

下記の例では、マリリン･モンローの笑顔をクリックすることによって、actionで指定されたCGIスクリプトが実行されます。

この場合、yok.cgiは、query_stringから｢Item｣の引数を取り出し、Locationヘッダでページを移動させるだけです。

        
        
        <form method="get" action="../scripts/yok.cgi">
        
        <select name="Item">
        <option value="item1" selected> 選択肢１
        <option value="item2"> 選択肢２
        <option value="item3"> 選択肢３
        <option value="item4"> 選択肢４
        <option value="item5"> 選択肢５
        <option value="item6"> 選択肢６
        </select>
        
        <input type="image" src="../images/monroe.gif" border=0>
        
        </form>
        
        

選択肢１ 選択肢２ 選択肢３ 選択肢４ 選択肢５ 選択肢６

---