マウスを当てると、サイコロの背景色を変化するように
したいです。
function senntaku(IMG){document.image1.src=IMG}
document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">');
上記のソースでサイコロの背景の画像がマウスに当たるとMAP.pngからMAPsenntaku.pngに変わるように作ったつもりですが、全然変わらない所か、サイコロ自体見えなくなりました。
どう修正したら、変える事ができるのか、教えてください。
<html>
<head>
<link rel="stylesheet" href="daisu.css" type="text/css"/>
<script src="daisu.js"></script>
<title>ダイス戦略</title>
</head>
<body>
<div id="title">
<p>あああ</p>
<p><button id="btn_gamennkirikae" type="button">ああああ</button></p>
</div>
<div id="gamegamenn">
<p><button id="btn_hitori" type="button">あああああ</button></p>
</div>
<div id="map">
<ul id="sima">
<script type="text/javascript">
/*サイコロ*/function saikoro(){
var sai=new Array("sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png");
var imgs = document.querySelectorAll('.saikoro');
for (var i = 0; i < imgs.length; i ++) {
var r = Math.floor(Math.random()*sai.length);
imgs[i].setAttribute('src', sai[r]);
}
}
function masusaikoro(){
var sai=new Array("sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png");
var imgs = document.querySelectorAll('.saikoro');
for (var i = 0; i < imgs.length; i ++) {
var r = Math.floor(Math.random()*sai.length);
imgs[i].setAttribute('src', sai[r]);
}
}
function senntaku(IMG){document.image1.src=IMG} ＊＊＊＊ここと＊＊＊＊＊
document.write('<li>');
document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">'); ＊＊＊ここ＊＊＊＊
document.write('</li>');
</script>
</ul>
<div id="hyouzi">
</div>
</div>
<body>
</html>
補足
特定のタグ内の文章であれば丸ごと置き換えることもできるのですが、今回考えておりますのは、ブラウザ上で選択状態にある文章を置換するアクションに対するプログラムであるため、範囲が不定である今回のケースでは難しそうです。