[Up] [Next] [Previous]

＜ＩＮＰＵＴ＞タグと画像

<INPUT>タグにはTYPEオプションでIMAGE を指定し、SRCオプションでイメージを読み込むと、そのイメージの 座標をNAMEで指定した名前に ".x" を付けた名前にX座標を、".y"を 付けた名前に Y座標を入力データとしてサーバに送る機能があります。この機 能で後で説明するクリッカブルマップのような機能が実現できます。

画像座標情報を得る方法

このボタンを押すとリセットします:

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<INPUT NAME="Testimg" TYPE="image" SRC="img/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"> <P>

</FORM>

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


ボタンをイメージにする

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

下記の例では、唐辛子をクリックする事によって、ACTIONで指定さ れた CGIスクリプトが実行されます。

gcom.cgi は、QUERY_STRING から "computer" の引数を取り出し、 Location ヘッダでページを移動させているだけです。 
<FORM METHOD="GET" ACTION="/cgi-bin/gcom.cgi">

<SELECT NAME="computer">
<OPTION VALUE="/cpu/sun-ultra.html" selected> Sun UltraSPARC
<OPTION VALUE="/cpu/dec-alpha.html"> DEC Alpha
<OPTION VALUE="/cpu/intel-pentium.html"> Intel Pentium Pro
<OPTION VALUE="/cpu/hp-parisc.html"> HP PA-RISC
<OPTION VALUE="/cpu/ibm-powerpc.html"> IBM PowerPC
<OPTION VALUE="/cpu/mips-r4000.html"> MIPS R4000
</SELECT>

<INPUT TYPE="image" SRC="img/chili.gif" BORDER=0>

</FORM>

[Up] [Next] [Previous]