アプリ版：「スタンプのみでお礼する」機能のリリースについて

スワップイメージのフェード方法を教えてください

解決済

  • 質問者：mamammaa
  • 質問日時：
  • 回答数：5件

はじめまして。
スワップイメージを、あるサイトを参考に作ってみました。
それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。
JavaScriptは全く分からず、困っています。
お助けください。お願いします。

ちなみに以下がスワップイメージのソースです。
image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。

<HEAD>
　<script language="JavaScript">
　<!--
　Img = new Array()
　Img[0]="img/image1.jpg"
　Img[1]="img/image2.jpg"
　Img[2]="img/image3.jpg"
　AImgs = new Array()
　for (i=0 ; i<Img.length ; i++){
　　 AImgs[i] = new Image()
　　AImgs[i].src = Img[i]
　}
　function Swap(a,b){
　　a=a.name
　　document.images[a].src = Img[b]
　}
　//-->
　</script>
</HEAD>

<BODY>
　<TABLE>
　　<TR>
　　　<TD><IMG src="img/image1.jpg" name="image"></TD>
　　</TR>
　　<TR>
　　　 <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD>
　　　<TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD>
　　</TR>
　</TABLE>
</BODY>

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#3、4です。



後で見たら1行ぬけていました。


スクリプトの最初のほうの setImage の中の
　 img.src = this.changeSrc;　の次に

　 this.changeSrc = null;
の1行を追加です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

どうもありがとうございました。
希望通りの動きになりました。
しかし難しすぎて理解できません・・。
もっと勉強します。。

通報する
お礼日時：2011/02/07 10:49

No.4

  • 回答者： fujillin
  • 回答日時：

//つづき



//@cc_on

var fadeSwap;

(function(){
var swap=function(){};

swap.prototype.setImage=function(){
　if(!this.changeSrc) return;
　var img=document.createElement("img"), s=img.style;
　img.src=this.changeSrc;
　s.position="absolute";
　s.top="0px";
　s.left="0px";
　setOpacity(img, 0);
　this.target.appendChild(img);
　this.fade(img, this.step, this.target);
}

swap.prototype.fade=function(elm, step, target){
　var op=0;
　var interval=setInterval(function(){
　　op += step;
　　op=op>100?100:op;
　　setOpacity(elm, op);
　　if(op>=100){
　　　target.getElementsByTagName("img")[0].src=elm.src;
　　　target.removeChild(elm);
　　　clearInterval(interval);
　　　elm=target=null;
　　}
　}, this.interval);
}

swap.init=function(id, speed){
　if(speed<=0) speed=1;
　var S, targ, wrap=document.getElementById(id);
　if(!wrap || wrap.length) return;
　if(targ=getClass(wrap, /\btarget\b/)){
　　if (targ.style.position != "absolute") targ.style.position="relative";
　　S=new swap();
　　S.target=targ;
　　S.step=speed>500?2:Math.min(100, 1000/speed | 0);
　　S.interval=speed * S.step / 100 | 0;
　　S.changeSrc=null;
　　S.src=targ.getElementsByTagName("img")[0].src;
　　wrap./*@if(1)attachEvent("on"+@else@*/addEventListener(/*@end@*/"mouseover",listener(S, 1),false);
　　wrap./*@if(1)attachEvent("on"+@else@*/addEventListener(/*@end@*/"mouseout",listener(S, 0),false);
　}
　wrap=null;
　return S;
}

function listener(S, flag){
　return function(e){
　　var chg=null, t=e./*@if(1)srcElement@else@*/target/*@end@*/;
　　if(t && t.nodeName=="IMG" && t.parentNode && t.parentNode.className.match(/\bthumbnail\b/)) chg=flag?t.src:S.src;
　　if(chg){
　　　S.changeSrc=chg;
　　　setTimeout(function(){S.setImage.call(S)}, 50);
　　}
　}
}

function getClass(p, reg){
　var i, res=null, cld=p.getElementsByTagName("*");
　for(i=0; i<cld.length; i++)
　　if(reg.test(cld[i].className)){res=cld[i]; break;}
　return res;
}

function setOpacity(e, o){
　e.style./*@if(1)filter="alpha(opacity="+o+")"@else*/opacity=o/100/*@end@*/;
}

fadeSwap=swap.init;
})();
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

#2です。



＞私の質問が悪かったようです
いえ、質問は理解できていたつもりです。
#2にも書きましたが、不必要に長かったので（？）替わりのサンプルを回答したつもりだったのですが、とりあえず、そのときの長のをそのまま…

HTMLの構成は
・変化する画像の親要素にclass="target"を
・マウスオンの対象画像の親要素にclass="thumbnail"を
　（画像数はいくつでも可）
・全体をラップする要素にidを付けておく（グループ化のため）

* ご質問文はテーブルのマークアップになっていますが、実はtest2、test3のようなものを想定しています
* fadeの際にtarget内に画像要素をposition:absoluteで重ねていますので、target要素はblock（またはinline-blockなど）にしておいてください
（targetそのものを変化させると、マウスを画像上でスライドさせたときに面倒なので）
* (↑)の理由から、target内の画像サイズは、CSSで同じになるように設定しておく必要があります
* 入力値やhtml構成のチェックはほとんど省いていますので、想定と違うとその部分がおかしくなる可能性大です
（というわけなので、まぁご参考までに）

指定方法は、fadeSwap(要素id, 速度(mmsec)) で行うようにしています
（長いので2回に分けての回答になります）


◇HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.target img { width:240px; height:180px; }
.thumbnail img { width:80px; height:60px; }

#test1 .target { display:inline-block; padding:0; }
ul#test3 { list-style-type:none; padding:0; margin:0; }
</style>
</head>

<body>

<table id="test1">
<tr>
<td class="target">
<img src="A.jpg" alt="">
</td>
</tr>

<tr>
<td class="thumbnail"><img src="B.jpg" alt="B"></td>
<td class="thumbnail"><img src="C.jpg" alt="C"></td>
<td class="thumbnail"><img src="D.jpg" alt="D"></td>
</tr>
</table>

<hr>

<div id="test2">
<div class="target">
<img src="A.jpg" alt="">
</div>

<div class="thumbnail">
<img src="B.jpg" alt="B">
<img src="C.jpg" alt="C">
<img src="D.jpg" alt="D">
</div>
</div>

<hr>

<ul id="test3">
<li class="target">
<img src="A.jpg" alt="">
</li>

<li class="thumbnail">
<img src="B.jpg" alt="B">
<img src="C.jpg" alt="C">
<img src="D.jpg" alt="D">
</li>
</ul>

<script type="text/javascript" src="fadeSwap.js"></script>
<script type="text/javascript">
<!--
fadeSwap("test1", 1000);
fadeSwap("test2", 3000);
fadeSwap("test3", 300);
//-->
</script>
</body>
</html>


◇jsファイルは次に（１回に入るよう空白を縮めています）
（なお全角空白は半角にしてください）
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

簡単に作ってみようと思ったらやたら長くなってしまった（←要領悪すぎか？＞私）。


単独に、fadeIn/Outの動作をするものだけ別に作ったので、ご参考までに…

ソース内のimg要素にマウスオーバーすると、fadeOut→fadeInします。
（都合でcallbackをくっつけちゃったので、わかりにくくなったかも。普通だといらないと思います。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
img { cursor:pointer; }
img.active { cursor:wait; }
</style>
</head>
<body>

<div>
<img src="A.jpg" alt="A">
<img src="B.jpg" alt="B">
<img src="C.jpg" alt="C">
<img src="D.jpg" alt="D">
</div>


<script type="text/javascript">
<!--
//@cc_on

(function(){
var step = 2; //アニメーションの変化量
var interval = 50; //アニメーションのインターバル


// fadeIn/Outのアニメーション処理
var fade = function(e, flag, callback){
　// flag（1:fadeOut、0:fadeIn）
　var op = flag?100:0, increment = flag?-step:step;

　// 繰り返しのアニメーションを定義
　var intervalId = setInterval(function(){
　　op += increment;
　　op = op<0?0:op>100?100:op;
　　setOpacity(e, op);
　　if (op==0 || op==100) {
　　　clearInterval(intervalId);
　　　if (callback) callback();
　　}
　}, interval);
}


// 透明度を設定（o:透明度 0< o <100）
var setOpacity = function(e, o){
　e.style./*@if(1)filter = "alpha(opacity=" + o + ")" @else*/opacity = o/100 /*@end@*/;
}


// イベント処理関数
var listener = function(evt){
　var t = evt./*@if(1)srcElement@else@*/target/*@end @*/;

　// image要素以外の場合、又はfade処理中は何もしない
　if (t.nodeName != "IMG" || t.className=="active") return;
　t.className = "active";
　fade(t, 1, function(){
　　fade(t, 0, function(){
　　　t.className = "";
　　});
　});
}


// イベントハンドラを設定
document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end @*/'mouseover', listener, false);
})();

//-->
</script>
</body>
</html>

この回答への補足

すみません、私の質問が悪かったようです。
image1、image2、image3と3枚の写真があり、image2にカーソルが行くとimage1の写真がimage2に変わり、image3にカーソルが行くとimage1の写真がimage3に変わる、というスワップイメージを作りました。その、image1の写真が切り替わる際にフェードインフェードアウトさせたいのですが、いろいろと試してみましたがうまくいきませんでした。
どのようなjavascriptを追加したら良いのか、教えてください。お願いします。

補足日時：2011/02/01 11:37
通報する
    • good
    • 0
    • 件
通報する

No.1

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

フェード処理のサンプルはいくらでも見つかると思うけど、それより


　name="image"
は文法違反じゃないけど、止めたほうがいいと思う。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご指摘ありがとうございました。修正します。

通報する
お礼日時：2011/02/01 11:26

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報