画像指定のプログラムを短くする方法

Question

（具体的な回答でなくてもヒントになるような簡単な例文だけで構いません）

下記のサイトを例にします。
http://weboook.blog22.fc2.com/blog-entry-6.html

ボタンクリックによって指定した画像が切り替わる仕組みです。

JavaScriptですが、サイトでは画像が3つだけです。
これが画像４、画像５、ときて20～100種類くらいになった場合、
つまり画像の種類が増えた場合もこの方法で

function showimg1(){
document.area1.src = "画像の名前";
}

を繰り返していては画像の名前も変更しないといけませんし非効率です。

要は、

src = "画像の名前";

ここの名前を20～100回も入力するのが煩わしいということです。
画像ファイル名に類似性を持たせることは可能です（picture1.pngやpicture2.pngなど）

画像指定の部分を簡略化することはできますか？

Answer 1

画像をリストにしておけばよいでしょう
ボタンも自動で作ったほうが楽です

• codepen

Comments

[yambejp]

存在しない画像とか、読み込み失敗したときどうするかも
調整が必要かもしれません

[_L9u7c4i0a]

あの、とてもとても有難いですし楽なのですが、ここまで楽にしていただく必要は無く…(^_^;)
煩わしいとは言いましたがボタンだけは一つずつ置いていきますので、単にフォルダ内の画像を、コードを個別に書かずに指定出来ないかと思っただけです。具体的に言うと
gazou1.png、゛2.png、゛3.png、゛4.png、゛5.pngとフォルダにあった場合。
そしてボタンが5個存在する場合。ボタンの順、そして数字の順に画像をボタンに割り当てるといったような事は出来ないでしょうか？
あと画像の読み込みに関しても、別サイトから読み込むのではなく単に自分のフォルダから読み込む場合ですので。

[yambejp]

そうであればカスタムデータを利用して
各ボタンのdata-srcに画像を埋め込み、
ボタンを押したときにそれをメイン画像に渡してやればいいです

[_L9u7c4i0a]

一旦一箇所に読み込んでから割り振られるのですね。
また解読しようと思います。
素早い回答＆ソースありがとうございます。