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

2014/12/08 09:19

このQ&Aのポイント

マウスを当てると、サイコロの背景色を変化させる方法について教えてください。
現在のソースコードでは、サイコロの背景色が変化していないか、サイコロ自体が見えなくなっているようです。
修正方法を教えてください。

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

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

nomnom20
お礼率17% (7/39)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Ogre7077
ベストアンサー率65% (170/258)

2014/12/08 11:51 回答No.1

1. onmouseover と対になる onmouseout が指定されていない 2. 単引用符(U+0027)で囲まれた文字列の中に単引用符を使用するなら、エスケープが必要例: '<img ... \'MAPsenntaku.png\' ... ' お節介ではありますが 3. 複雑なHTML要素を生成するなら、document.createElement を使いましょう 4. フォーム要素以外への属性 name の乱用は危険です。id/class で代用しましょう 5. <body> 内の <script> で実行するより、<head> 内で DOMContentLoaded するのがオススメです