one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【9:Expansion】マウスオーバーで画像を拡大する

f:id:seintoseiya:20150503005521p:plain

プロジェクト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で書くと小文字にしなければいけない様です。

全ソースはこちら

github.com

関連アプリ・書籍

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript 第6版

JavaScript 第6版

入門者のJavaScript (ブルーバックス)

入門者のJavaScript (ブルーバックス)