マウスを当てると、サイコロの背景色を変化するように

解決済

質問者：nomnom20
質問日時：2014/12/08 09:19
回答数：1件

したいです。
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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2014/12/08 11:51

1. onmouseover と対になる onmouseout が指定されていない

2. 単引用符(U+0027)で囲まれた文字列の中に単引用符を使用するなら、エスケープが必要
例: '<img ... \'MAPsenntaku.png\' ... '

お節介ではありますが

3. 複雑なHTML要素を生成するなら、document.createElement を使いましょう

4. フォーム要素以外への属性 name の乱用は危険です。id/class で代用しましょう

5. <body> 内の <script> で実行するより、<head> 内で DOMContentLoaded するのがオススメです