ECサイトのように色ボタンをクリックしたらその色の商品画像を表示したい

Question

練習用にオリジナルのECサイトを作っています

その時に色違いの商品を表示したく
カラーボックスを作り、好きな色をクリックするとその色の画像が出るようにしたいです。

ーーー

問題

マウスオーバーではなくクリックした際に表示させたいです
またクリックもカラーボックスをクリックした際に表示して
画像クリックではないです

ーーー
とても分かりにくい表現で申し訳ありません。
プログラミング初心者です
よろしくお願いします。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

具体的なイメージがないのでなんとも言いようがありませんが
手っ取り早いのはフォームでサブミットで色名をわたすか
aタグで色名をつけたパラメータを渡すとかでしょうか？

#colorbox a{display:block;width:100px;height:100px;float:left;}
a#red{background-Color:red;}
a#yellow{background-Color:yellow;}
a#aqua{background-Color:aqua;}
a#lime{background-Color:lime;}

<div id="colorbox">
<a href="?color=red" id="red"></a>
<a href="?color=yellow" id="yellow"></a>
<a href="?color=aqua" id="aqua"></a>
<a href="?color=lime" id="lime"></a>
</div>