リストから選択したタイミングで画像を変えたい

質問

ドロップダウンメニューで選択したタイミングで画像が変えたいのです。

質問内容としては過去に解決した質問に近いのでリンクを貼ります。

◆JavaScript　Form　OPTION value◆
http://okwave.jp/qa/q3795624.html

こちらの質問の際にも記載されていた

■ドロップダウンメニューで画像が変わる（JavaScript）
http://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

を私も実現したいのですが、<form>の中の画像の記載のやり方が<img>タグで
あれば私も試して実現できたのですが、実際にやりたいのは<input type="image">
の方なんです。

りストから選択したら自動的に画像が変わりその画像がボタンとしてformで送信されるようにしたいのです。

<img>ならname="xxxxx"で

if(fname==1){document.ｘｘｘｘｘ.src=img0.src;}

としたらできますが、<input type="image"　name="xxxxx">としたらうまく画像が変わらないのです。

<button><img src="xxx.gif" name="aaa"></button>みたいにボタンタグを使えば可能なんですが
本来のボタンの上に画像が貼りつけた状態で不格好で、ボタンのサイズを小さくしても画像が途中で途切れてしまいます。

何か方法がないものでしょうか？色々と調べて試したりしても上手くいかなかったのでお知恵を借りたいのですが。

回答No.1

yambejp · ベストアンサー

id振ってみては？

<input type="image" src="1.jpg" name="xxxxx" id="xxxxx">
<input type="button" value="change" onclick="document.getElementById('xxxxx').src='2.jpg'">

お礼

ありがとうございます。idで試してみたら無事動作できました。

以下のような形で教えて頂いたinput type="button"のonclick
時には入れていませんがidとメソッドでやってみたら可能でした

<input type="image"src="aaaa.gif" id="eee" alt="" />

document.getElementById('eee').src=img0.src;