JavaScript 画像の追加、消去、差し替えが楽な方法

Question

javascriptで

element1.style.backgroundImage = "url(../image/画像1.img)";
element2.style.backgroundImage = "url(../image/画像2.img)";
element3.style.backgroundImage = "url(../image/画像3.img)";

とするのは面倒くさいのであらかじめファイルの中にひとまとめにすればその中を順番に表示するなど、
画像の名前に左右されない方法はありますか？

画像の追加、消去、差し替えが楽な方法であればどんな方法でもいいです。

存在しないのなら[ない]と教えてください。

Comments

[kogure]

こんんちは。

もう少し詳細に実現したいことを記載いただいてよろしいですか？
「画像の名前に左右されない」とありますが「意図した箱」に「意図した画像」は表示せずランダムに表示をおこなうのでしょうか？

Answer 1

1枚絵にいろいろな画像をまとめて表示させる、CSSスプライトみたいな話ですか？
http://parashuto.com/rriver/development/css-sprite
http://lopan.jp/css-sprites/

Comments

[konkuro1007]

そうゆう方法もあるんですね。でもちがうんですよねすみません

Answer 2

PHPなどのｻｰﾊﾞｰｻｲﾄﾞｽｸﾘﾌﾟﾄなら容易
JAVASCRIPT単体ではｻｰﾊﾞｰ内ﾌｫﾙﾀﾞ一覧取得出来ないかもしれないです

Comments

[konkuro1007]

ありがとうございます。諦めてphpを使います。多分そのやり方が王道だと思うんで

[退会済みユーザー]

私はこんなのを使っています
<?php
$pic_data="";
$i=0;
$filelist = scandir("pic");
foreach($filelist as $value){
if(strpos($value,".jpg")>0){
if(strlen($pic_data)==0){
$pic_data="pic/".$value;
}else{
$pic_data=$pic_data.",pic/".$value;
}
$i++;
}
}
echo $pic_data;
?>