2011年10月 のアーカイブ

input type=”image”で画像の座標が送られる

2011年10月22日 土曜日

みなさんこんにちは。

ふじもんです。

今回はとあるWebアプリケーションの案件でハマったことをメモ。

 

通常htmlやPHP等のボタンで値を送信する場合(formを使って)、

<input type="submit"...>

を記述して送信します。

今回はボタンではなく画像をクリックした時に値を送るので

<input type="image" src="abc.jpg" name="action" value="public" />

といった感じに書き換えました。(どの画像がクリックされたか判断し、GETで送信する処理)

Google Chromeでは通常に値が送信されていたのですが、FireFoxやIEでは値が送信されず、「action.x=7&action.y=12」といった値が送られていて、actionの値はNULLが送られていました。

そこで、inputタグの仕様について調べてみた結果、

 

image : イメージ付き送信ボタン(Src属性値のイメージを表示します。 Alt属性の指定も必須となります。データ送信時はクリック地点に関する情報も送られます。 非視覚系ブラウザにも対応させるため、送信ボタンを複数用意するか、 クライアントサイドイメージマップを利用して下さい)

http://www.hajimeteno.ne.jp/html40/i/input-image.html

 

とのことでした。

 

結局スマートなやり方ではないのですが、

<form name="fuji" method="get" action="fujimonia.php">
<input type="image" src="abc.png" name="public" width="20" height="20"/>
<input type="image" src="def.png" name="trash" width="20" height="20"/>
</form>

といった感じで「name」属性の名前(送られる値はpublic_xやtrash_x等のため)で判別するようにしました。

 

ちなみに、submitボタンを画像にするのは数通りのやり方があって、

1. <input type="image"...
2. <button type="submit"...
   <img src="...
  </button>
3. <img onclick="document.フォーム名.submit();"...

があるらしいですね。

 

ちなみに今作っているのはこんな感じのブログに似たポートフォリオシステム。

 

とりあえず走り書きですが。

以上,徒然なるままに。

ふじもん

 

[参考文献]

Webデザインのタネ

HTML4.01 Reference

inputタグ(type=”image”)の謎