電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：jyowa
  • 質問日時：
  • 回答数：3件

現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。
画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。
下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます）
回答の方、宜しくお願い致します。

<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript" src="../js/layer.js"></script>
<script type='text/javascript'>
<!--
//--すべてを隠す
function hideALL(){
hideLAYER('img0')
hideLAYER('img1')
hideLAYER('img2')
hideLAYER('img3')
}
//-->
</script>
<!-- InstanceEndEditable -->
<link href="../css/original.css" rel="stylesheet" type="text/css" media="all">


</head>


<!-- InstanceBeginEditable name="main-images" -->
<div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>
<!-- InstanceEndEditable -->
</div>
<!--work-left -->


<div class="work-bottom">
<!-- InstanceBeginEditable name="sumnail" -->
<a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>
<!-- InstanceEndEditable -->
</div>
<!--work-bottom -->


</div><!--work-shosai -->

</div><!--main終了 -->

</div><!--contents終了 -->

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： yyr446
  • 回答日時：

No.2です。

ということで、
いつぞやのタイトルくるくるのサンプルを基に、フェードインフェードアウト
をオブジェクト指向もどき(？)で作ってみた。
fadeinクラス、fadeoutクラスを拡張すれば、もっときめ細かく
調整出来て、汎用性がたかまるかも...

参考にならなかったら無視してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>FadeIn/FadeOut</title>
<script type="text/javascript" charset="utf-8">
<!--
var fadein = function (node,interval){
this.counter = 0;
this.target = node;
this.interval = interval;
this.timerId = setInterval((function(that){
return function(){that.loop();};
})(this),this.interval);
this.stop = function () {
this.timerId && clearInterval(this.timerId);
this.timerId = null;
};
this.loop = function(){
this.target.style.width=this.counter+"px";
this.target.style.height=this.counter+"px";
this.target.style.opacity = this.counter / 100;
this.target.style.filter = "alpha(opacity=" + this.counter + ")";
if( ++this.counter>100) this.stop();
};
};
var fadeout = function (node,interval){
this.counter = 100;
this.target = node;
this.interval = interval;
this.timerId = setInterval((function(that){
return function(){that.loop();};
})(this),this.interval);
this.stop = function () {
this.timerId && clearInterval(this.timerId);
this.timerId = null;
};
this.loop = function(){
this.target.style.width=this.counter+"px";
this.target.style.height=this.counter+"px";
this.target.style.opacity = this.counter / 100;
this.target.style.filter = "alpha(opacity=" + this.counter + ")";
if( --this.counter<0) this.stop();
};
};

fadein.start = function(target,interval){
new fadein(target,interval );
}
fadeout.start = function(target,interval){
new fadeout(target,interval );
}

function fadein_s(){
var target=document.getElementById("target");
fadein.start(target,1);
}
function fadeout_s(){
var target=document.getElementById("target");
fadeout.start(target,1);
}
// -->
</script>
</head>
<body>
<div>
<image id="target" src="image/yahagi.png" style="width:0px;height:0px;">
</div>
<button onclick="fadein_s();">フェードイン</button>
<button onclick="fadeout_s();">フェードアウト</button>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

フェードイン・フェードアウト効果としては、javascriptで


スタイル属性の値を連続的に変化させるのが普通だと思います。

・表示領域のwidhtとheigthを0から目的のサイズまで変更すれば、
ググーと大きくなる視覚効果が得られます。フェードアウトは
それを逆にします。

・あるいは、opacityを0％（透明）から100％（不透明）まで、
連続的に変化させれば、じわーと出てくる視覚効果が得られます。
フェードアウトはそれを逆にします。
opacityの指定はCSS2だとブラウザーによって方言があります。
（例）opacityを50％の指定
element.style.filter = 'alpha(opacity=50)';　//IE
element.style.MozOpacity = 0.5;　//FireFox
element.style.opacity = 0.5; //CSS3 サポート
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： sora1tora2
  • 回答日時：

こんにちは


言われている事とは少し違うかもしれませんが、

hightslide
http://highslide.com/

multibox
http://www.phatfusion.net/plugins/multibox/

のような一般的なものでは駄目なのでしょうか？
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報