ホームページに画像ボタンを設置するタグ

質問

CMSを使ってHPを作成しています。

前のページに戻る　と　ページトップに戻る　の二つのボタンを画像で作成するのに、すべてのページに貼り付けるのは大変なので、php ファイルを書き換えました。

<p><input type="image" src="画像URL" onclick="history.back()" title="前のページに戻る"></p>
<p><a href="#headcopy"><input type="image" src="画像URL" title="ページトップに戻る" align="right"></a></p>

このように追記したところ、Firefox GoogleChrome では正常に作動したのですが、IE8では、ページトップのみ、反映しませんでした。
画像はちゃんと配置されてるのですが、クリックしてもトップに飛んでくれません。
それで、別のタグとして

<p><input type="image" src="画像URL" onclick="history.back()" title="前のページに戻る"></p>
<p><a href="#headcopy"><img src="画像URL" title="ページトップに戻る" align="right"></a></p>

このように変更すれば、作動しました。
前のページに戻るのボタンは「input type」で作動してるのに、ページトップに戻るの方は「img src」でないと、動かなかったのはなぜなのでしょうか？

また、「input type」と「img src」は、同じことができるのであれば、どちらを使ってもいいのでしょうか？
用途や環境によって使い分けなどをする必要があるのでしょうか？

あまりHTMLなどに詳しくないのですが、どうかよろしくお願いします。

回答No.2

abril

> 「input type」と「img src」は、同じことができるのであれば、どちらを使ってもいいのでしょうか？

いえ、この2つは全然異なるものですので、正しく使い分けて下さい。
input要素は原則、form要素のコントロール部品です。入力・送信・リセットなどの役目をそれ自体が持つものです。
<input tye="image"～>で用いた場合は、「イメージ付きの送信ボタン」となり、<input type="submit"～>と基本は同じ機能です。
それに対し、img要素は単に指定した部分にイメージを埋め込む為のものでしかありません。

なので、単にonclick="history.back()" やページ内ジャンプを指定したいだけなら、a要素に指定してimg要素を子要素にした方が無難です。
少なくとも、
<input type="image" src="画像URL" onclick="history.back()"～>
はともかく、
<a href="#headcopy"><input type="image" src="画像URL"～></a>
という<input tye="image"～>をa要素の子要素としてリンクを張る…という記述は普通はしないと思います。

お礼

やっぱり使い分けないと駄目なんですね。
詳しくないので、本やHTMLに関するHPを見ながら、使えそうなところを切り貼りして、反映すれば「それでできてる」と思っていました。

どちらも、a要素をつかってやり直して、三種類のブラウザで動作確認ができました。
ありがとうございました。

回答No.1

yambejp

＞<input type="image" src="画像URL" title="ページトップに戻る" align="right">

type=imageはサブミットされる場合があります。
ブラウザによって挙動がことなるので、あまりお勧めできるタグでは
ありません。

どうしてもつかいたいなら
<input type="image" src="画像URL" onclick="return false;">
として、挙動を無効化してください。

お礼

ありがとうございます。

ブラウザによる挙動の差など、まだまだ覚えることがたくさんあって大変ですが、がんばります。