ホームページビルダー・グレート初心者講座

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座≠ヨグレート初心者講座 質問掲示板へ

HTML版 過去ログ
| 掲示板を見る | ホームに戻る | ワード検索 | 過去ログ |   

画像のフェードイン、アウト

日時: 2007/10/23 17:42
識別: IDM4xpjZexN.Y
名前: レトン

os:xp
ビルダー:11

画像が「無し→ぼんやり→はっきり」へ「はっきり→ぼんやり→無し」のフェードイン、アウトは出来ないでしょうか。
(「レイアウト枠ーエフェクト」のフェードイン、アウトではなく・・)

Re: 画像のフェードイン、アウト ( No.1 )
日時: 2007/10/25 13:33
名前: peradan
参照: https://www.ex-shop.net


こちらで紹介されているものは如何でしょうか?
https://javascript.eweb-design.com/0814_fio.html

HTMLを触る部分はIMGタグにstyleをひとつ書くだけで最低限で済むので
便利かと。

的外れな回答だったらすみません。
Re: 画像のフェードイン、アウト ( No.2 )
日時: 2007/10/26 13:07
名前: レトン

ありがとうございます。

早速拝見しました。
Sample1でOKですが出来ればボタンなしでやりたいです。

(1)Sample2で「1枚」のみでフェードイン、フェードアウトのScriptはどう記述するのでしょうか。

下記にSample2のScriptを拝借しました。

これを訂正戴ければありがたく思います。

ーーーーーーーーーーーーーーーーーーーーー

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// 画像のフェードイン・フェードアウト
spd = 50; // 変化させる間隔(ミリ秒単位)
ntc = 2; // 何%ずつ変化させるか
// フェードインさせる画像のname属性(順番に並べる)
fii = new Array("ia","ib","ic");
cnt = 0;
i = 0;
// フェードイン
function fdInImg() {
document.images[fii[i]].filters['alpha'].opacity = cnt;
cnt += ntc;
if(cnt >= 100) {
cnt = 0;
i++;
}
if(fii.length <= i) return;
setTimeout("fdInImg()",spd);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" onLoad="fdInImg()">
画像が順番にフェードインします。<BR><BR>
<IMG src="../img/img1.jpg" name="ia" border="0" style="filter:alpha(opacity=0);">
<IMG src="../img/img2.jpg" name="ib" border="0" style="filter:alpha(opacity=0);">
<IMG src="../img/img3.jpg" name="ic" border="0" style="filter:alpha(opacity=0);">
<BR><BR>
</BODY>
</HTML>

ーーーーーーーーーーーーーーーーーーーーーーー

解説・注意点など
onClick="fdInImg('ia')"、onClick="fdOutImg('ia')"
の「ia」は<IMG>タグで指定したname属性です。

<IMG>タグの
style="filter:alpha(opacity=0);"
で、あらかじめ画像を透明にしています。


===============================

よろしくおねがいします。

ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved