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

みなさんこんにちは。

ふじもんです。

今回はとある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”)の謎

コメント / トラックバック2件

  1. たつや より:

     _n
     ( l    ハ,,ハ
      \ \ ( ゚ω゚ )
       ヽ___ ̄ ̄  )  このブログ、GOODです!
         /    /

  2. fujimonia より:

    たつやさん

                 ___
                / ノ ” ⌒\
              / ( ● ) (● )\
            / :::::⌒,   ゝ⌒:::::\
            |      ト==ィ’     |  このブログがないと何も始まらないだろっ?
      _,rーく´\ \,–、  `ー’    /
    . ,-く ヽ.\ ヽ Y´ /     ー  ´ ! ` ー-、
     { -! l _」_ノ‐′/ ヽ        |    ∧
    . ヽ ゛ー’´ ヽ  /   ヽ       i   |/ハ
     `ゝ、  ノ ノ     ヽ     |

コメントをどうぞ