プルダウンで画像とリンク先を切り替えたい

Question

前提・実現したいこと

プルダウンメニューで金額や商品の色を選択すると、
提示されている商品の写真がそれに対応している写真に変わるようにしたい。

発生している問題・エラーメッセージ

buttonですが自分が望む形に近いものが見つかりました。

http://weboook.blog22.fc2.com/blog-entry-6.html

こちらをselectメニューに応用したいです

該当のソースコード（参考にしたもの）

<a href="最初のリンク先URL" id="linkArea" >
  <img src="最初に表示する画像のURL" name="imgLink">
</a>
<div id="message">最初に表示する文章</div>

<input type="button" onclick="showimg1()" value="画像1">
<input type="button" onclick="showimg2()" value="画像2">
<input type="button" onclick="showimg3()" value="画像3">]

<SCRIPT type="text/javascript">
<!--
function showimg1(){
  document.imgLink.src = "画像1のURL";
  document.getElementById("linkArea").href = "リンク先URL";
  document.getElementById("message").innerHTML = "表示する文章1";
}

function showimg2(){
  document.imgLink.src = "画像2のURL";
  document.getElementById("linkArea").href = "リンク先URL";
  document.getElementById("message").innerHTML = "表示する文章2";
}

function showimg3(){
  document.imgLink.src = "画像3のURL";
  document.getElementById("linkArea").href = "リンク先URL";
  document.getElementById("message").innerHTML = "表示する文章3";
}
  -->
</SCRIPT>

該当のソースコード（応用にしたいもの）

    <p><ing src="最初に表示する画像のURL"></p>
      <form>
        <select name="sel2">
          <option value="">値段を選ぶ▼</options>
          <option value="リンク先URL1">3000円の商品</option>
          <option value="リンク先URL2">4000円の商品</option>
          <option value="リンク先URL3">5000円の商品</option>
         </select>
         <input type="button" value="カートに入れる" class="">
      </form>

・プルダウン部分で（例：3000円を）選ぶと、それに対応した画像が商品写真のところに現れる
・カートに入れるとを押下すると、リンク先URLに飛ぶ

お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。

Comments

[FKM]

どういうことをやってみたのですか？そしてどういうところで躓いているのですか？
また、javascriptの知識は多少はあるんでしょうか？

Answer 1

プルダウン部分で（例：3000円を）選ぶと

change - イベントリファレンス | MDN

それに対応した画像が商品写真のところに現れる

img タグの画像を動的に変更する (JavaScript プログラミング)

カートに入れるとを押下する

click - Web API | MDN

と、リンク先URLに飛ぶ

location.href（リンク）-JavaScript入門