画面を暗くする方法(失敗談)です。
bodyに透明度をかけようとしたのですが、ブラウザによって挙動が異なりますね。
また、『ユーザー操作をとめることはできない』ので、前回の
『画面暗くする』のやり方がお奨めです。
SAMPLE
確認環境： I.E.8、Firefox3.6、Safari5.0.5
『解説』
<script type="text/javascript">
function fadeout(){
//画面いっぱいに表示する要素を作成する
var tarElement = document.getElementsByTagName('body')[0];
//要素の透明度を設定する。(ブラウザ依存)
var userAgent = window.navigator.userAgent.toLowerCase();
//for I.E.
if (userAgent.indexOf("msie") > -1) {
tarElement.style.filter='alpha(opacity=50)';
}
//for Other Browsers
else {
tarElement.style.opacity=.5;
}
//3秒後に解除する。
setTimeout("fadeIn()", 3000);
}
function fadeIn(){
var tarElement = document.getElementsByTagName('body')[0];
//要素の透明度を設定する。(ブラウザ依存)
var userAgent = window.navigator.userAgent.toLowerCase();
//for I.E.
if (userAgent.indexOf("msie") > -1) {
tarElement.style.filter='alpha(opacity=100)';
}
//for Other Browsers
else {
tarElement.style.opacity= 1;
}
}
</script>
・fadeout
サンプルではボタン押されたときに実行しています。
body要素を抽出しています。getElementsByTagNameを使うと配列を返します。body要素はHTMLでは１つしかないはずなので、インデックスは０。
透明度処理はブラウザ依存です。というかI.E.だけが異なるんですね。。
※背景画像は今日もわんパグの素材を使わせていただきます。
どうもありがとうございます。
PR
