このコードは問題ないでしょうか。
javascriptを学んでいます。
練習のために下記のコードを自分なりに試行錯誤して作りました。
ちゃんと動くようになりましたが、自己流で修正を繰り返したので正しくない部分があると思います。
また、imgタグのそれぞれにidを付けて区別しています。
idを付けずにやる方が効率的で良いと思うのですが、実現することができず、
仕方なくidを全て付けて妥協しました。
改善点をご指摘して頂けると嬉しいです。ご教示をお願いいたします。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
<script type="text/javascript">
function aaa(evt){
var t = evt.target || evt.srcElement;
var tid = t.id;
var tag = t.parentNode.getElementsByTagName("img");
var kkkkkk = document.getElementById('kkkkkk');
if(t.nodeName != "IMG") return;
for(i=0; node=kkkkkk.children[i++];){
if(node.tagName != "IMG") continue;
if(node.id == tid.replace(/_|[0-4]/g,"")){
node.src = t.id+".jpg";
}
}
}
function rrrrr(a,b,c){
var ta = document.getElementById('testA');
var tb = document.getElementById('testB');
var tc = document.getElementById('testC');
ta.src = "testA_"+a+".jpg";
tb.src = "testB_"+b+".jpg";
tc.src = "testC_"+c+".jpg";
}
</script>
</head>
<body>
<div>
<img id="testA_0" src="testA_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_1" src="testA_1.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_2" src="testA_2.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_3" src="testA_3.jpg" width="30" alt="" onclick="aaa(event);" />
<br />
<img id="testB_0" src="testB_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testB_1" src="testB_1.jpg" width="30" alt="" onclick="aaa(event);" />
<br />
<img id="testC_0" src="testC_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testC_1" src="testC_1.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testC_2" src="testC_2.jpg" width="30" alt="" onclick="aaa(event);" />
</div>
<form>
<input type="button" value="おすすめ画像の組み合わせ その１" onclick="rrrrr(0,0,2)" /><br />
<input type="button" value="おすすめ画像の組み合わせ その２" onclick="rrrrr(3,1,0)" /><br />
<input type="button" value="おすすめ画像の組み合わせ その３" onclick="rrrrr(2,1,1)" /><br />
</form>
<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" />
</div>
</body>
</html>
お礼
ご回答頂きありがとうございました。