■技術資料らしきもの−JavaScript−画像の上に画像を配置してフェード（透過）

「FLASHでやれよ」とか言われるとそれまでですが。

ちょっとしたことをJavascriptでやりたいと思うのは、よくある話だし、そもそもFLASH嫌いだよって人もいるかもしれない。

そんなわけで、お手軽にJavascriptで画像の上に画像を置いて、さらにその画像が透過しても（フェードイン・フェードアウトしても）問題無いか、ということを突然実験してみたくなったわけです。

（以下のサンプルコードは、jquery.js前提の書き方しちゃってます。）

まず、divで単純に重ねた場合。

absoluteとかrelativeとか使ってdivを配置した場合・・・・・（配置適当だなー）
背景画像もついでに変えます。（例えば、○○部門の紹介、みたいなボタンで、バックの画像がそれぞれの部門の様子の写真になったりとかに使えそうですよね。）

IE6でも大丈夫っぽいですね。

一応、コードはこんな感じ

html

<div id="menuBox"> <img src="images/021/background_01.jpg" id="backImage" alt="メニュー背景画像" /> <div id="menuParts_1"> <a href="#"><img src="images/021/menu_01.jpg" id="menuImage01" alt="メニューその１" /></a> </div> <div id="menuParts_2"> <a href="#"><img src="images/021/menu_02.jpg" id="menuImage02" alt="メニューその２" /></a> </div> <div id="menuParts_3"> <a href="#"><img src="images/021/menu_03.jpg" id="menuImage03" alt="メニューその３" /></a> </div> </div>

css

#menuBox{ position: relative; width: 480px; height: 200px; margin-left: 30px; } #menuBox #menuParts_1{ position: absolute; left: 30px; top: 30px; } #menuBox #menuParts_2{ position: absolute; left: 30px; top: 65px; } #menuBox #menuParts_3{ position: absolute; left: 30px; top: 100px; }

js

$(function(){ $("#menuBox > div").hover( function(){ setOnMenu(this.id); }, function(){ setOutMenu(this.id); } ); }); function setOnMenu(id){ var tmp = id.split('_'); $("#backImage").attr('src', 'images/021/background_01_f'+tmp[1]+'.jpg'); for(var i=1; i<=3; i++){ $("#menuParts_"+i).stop(); if(i==tmp[1]){ $("#menuImage0"+i).attr('src', 'images/021/menu_0'+i+'_f2.jpg'); $("#menuParts_"+i).fadeTo(50, 1); }else{ $("#menuImage0"+i).attr('src', 'images/021/menu_0'+i+'.jpg'); $("#menuParts_"+i).fadeTo(500, 0.33); } } } function setOutMenu(id){ var tmp = id.split('_'); $("#backImage").attr('src', 'images/021/background_01.jpg'); for(var i=1; i<=3; i++){ $("#menuParts_"+i).stop(); $("#menuImage0"+i).attr('src', 'images/021/menu_0'+i+'.jpg'); $("#menuParts_"+i).fadeTo(200, 1); } }

背景画像をbackground-imageにしてみる

div重ねまくりなのもどうかな、ということで、背景画像を本当に背景として扱ってみます。

これも問題無さそうですね。めでたしめでたし。

最初のものとほとんど変わっていないけど、念の為コードを。

html

<div id="menuBox2"> <div id="menuParts2_1"> <a href="#"><img src="images/021/menu_01.jpg" id="menuImage21" alt="メニューその１" /></a> </div> <div id="menuParts2_2"> <a href="#"><img src="images/021/menu_02.jpg" id="menuImage22" alt="メニューその２" /></a> </div> <div id="menuParts2_3"> <a href="#"><img src="images/021/menu_03.jpg" id="menuImage23" alt="メニューその３" /></a> </div> </div>

css

#menuBox2{ position: relative; width: 480px; height: 200px; margin-left: 30px; background: url(images/021/background_01.jpg) no-repeat; } #menuBox2 #menuParts2_1{ position: absolute; left: 30px; top: 30px; } #menuBox2 #menuParts2_2{ position: absolute; left: 30px; top: 65px; } #menuBox2 #menuParts2_3{ position: absolute; left: 30px; top: 100px; }

js

$(function(){ $("#menuBox2 > div").hover( function(){ setOnMenu2(this.id); }, function(){ setOutMenu2(this.id); } ); }); function setOnMenu2(id){ var tmp = id.split('_'); $("#menuBox2").css({'background':'url(images/021/background_01_f'+tmp[1]+'.jpg) no-repeat'}); for(var i=1; i<=3; i++){ $("#menuParts2_"+i).stop(); if(i==tmp[1]){ $("#menuImage2"+i).attr('src', 'images/021/menu_0'+i+'_f2.jpg'); $("#menuParts2_"+i).fadeTo(50, 1); }else{ $("#menuImage2"+i).attr('src', 'images/021/menu_0'+i+'.jpg'); $("#menuParts2_"+i).fadeTo(500, 0.33); } } } function setOutMenu2(id){ var tmp = id.split('_'); $("#menuBox2").css({'background':'url(images/021/background_01.jpg) no-repeat'}); for(var i=1; i<=3; i++){ $("#menuParts2_"+i).stop(); $("#menuImage2"+i).attr('src', 'images/021/menu_0'+i+'.jpg'); $("#menuParts2_"+i).fadeTo(200, 1); } }

javascriptによる演出は、使い方さえ間違えなければ、軽いし効果的なのではないか、と思うのですよね。
（まあ上のサンプルが効果的かどうかはともかく。）

もう何が何だか分からなくなるとか、いろんな動作を詰め込みすぎて重いページになるとかは絶対ダメですが、まあ面白いので色々と使っていきましょう。

JavaScript関連リンク

サイト

Binbo-Special > 技術情報らしきもの > JavaScript
当サイトです。
OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい！です。

書籍

Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
読み途中ですが、なかなか面白いです。
jQueryで作る Ajaxアプリケーション
jQueryに興味を持ったら読んでみるのも吉。

▲一番上へ

• TOP
• ゲーム
• サイト主はこんな人
• 技術資料らしきもの
• 普段思った事をつらつらと
• メール
• リンク
• 別館

Copyright© 1999-2008 どんきー All Right Reserved!