【9：Expansion】マウスオーバーで画像を拡大する
プロジェクトNo.9：Expansion
読み込まれる度に画像がランダムに配置され、任意の画像へマウスオーバーすると画像を拡大するというものを作ってみた。
今回のポイントは以下の通り。
- 画像オブジェクトを「for()命令+参照番号」で指定
- 配置をランダムに設定
- マウスオーバーとマウスアウトの処理（注意点あり）
ソース
Javascript
<script type="text/javascript"> window.onload = function(){ for (i = 0; i < 4; i++) { imgObj = document.getElementsByTagName('img')[i]; imgObj.style.position = "absolute"; imgObj.style.left = Math.floor(Math.random() * 20) * 15 + 20 + "px"; imgObj.style.top = Math.random() * 200 + 50 + "px"; imgObj.onmouseover = function(){ this.width = 160; this.height = 120; this.style.zIndex = 4; } imgObj.onmouseout = function(){ this.width = 64; this.height = 48; this.style.zIndex = 1; } } } </script>
onmouseoverとonmouseout利用時の注意
初めonmouseoverとonmouseoutが反応しなかった。
なぜかというと、当初以下の様に記述していた。
imgObj.onMouseover = function(){ // 省略 imgObj.onMouseout = function(){ // 省略
これでは反応せず、以下の様に全て小文字にすると反応する様になった。
imgObj.onmouseover = function(){ // 省略 imgObj.onmouseout = function(){ // 省略
HTMLのimgタグの中に設定する場合は大文字小文字を区別しない様なのだが、
javascriptで書くと小文字にしなければいけない様です。
