- ベストアンサー
特定のトランジションを使って画像が自動的に切り替わっていくようにしたい
写真メインのHPを作っています。 下記のような数枚の画像が自動的に切り替わってループするスクリプト http://homepage2.nifty.com/toraneko/ugoku-blendtrans.html を使用したいのですが、切り替わる際のトランジションを こちらの徐々にフェードアウトしていくような物ではなく、 http://technique.eweb-design.com/0308_kt.html こちらのページの22Random Bars Verticalという縦線の物に 変えたいのですが、もし可能でしたら、方法を教えて頂けませんでしょうか。宜しくお願いします。 初心者の浅知恵で STYLE="filter:blendTrans(duration=3.0)"> ↓ STYLE="filter:Random Bars Vertical(duration=3.0)"> という感じで全部書き換えればいいのかと思ったのですが、全然違ったようで動きませんでしたorz
- nyaron
- お礼率100% (24/24)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
トランジションの22番はRandom bars verticalというらしいですが、利用法の解説はMSのサイトに出ています。 http://msdn.microsoft.com/ja-jp/library/cc392324.aspx 単純にしてみればこんな感じ？ （A.jpgとB.jpgを交互に入れ替え。 どこに設置するのか知らないけど、IE限定ですよ） <html> <head> <style type="text/css"> #img {width:300px; height:200px; filter:revealTrans(transition=22 duration=2);} </style> <script type="text/javascript"> var img = 'A.jpg'; function test() { var elm = document.getElementById('img'); elm.filters.revealTrans.Apply(); img = img=='A.jpg'?'B.jpg':'A.jpg'; elm.src = img; elm.filters.revealTrans.Play(); } </script> </head> <body> <img id="img" src="A.jpg"> <input type="button" onclick="test()" value="change"> </body> </html>
その他の回答 (1)
- sh_hirose
- ベストアンサー率66% (56/84)
２つ目のURLのソースを見ればわかると思いますが、 インラインフレームを使用しています。 トラジションはその画面へ遷移した際に表現するので、表示させる画像のみが記述されているHTMLファイルを作成する必要があります。 ２つ目のサイトの１１１行目、１１５～１２６行目を参考にしてみてください。 ちなみに1つ目のはフィルターですのでトラジションとは違います。
お礼
回答ありがとうございます。 うむむむ・・・なんだか難しそうです。 もうちょっと勉強してから挑戦してみたいと思います。 >ちなみに1つ目のはフィルターですのでトラジションとは違います。 ええええそうなんですか。だから書き換える程度じゃダメなんですね。 なんだか根本的な勘違いをしてたようです。
お礼
回答ありがとうございます。 HPビルダーで作っているのですが、 さっそく貼り付けてみたところキタワア .*・゜゜・*:.。..。.:*・゜（n'∀')η゜・*:.。. .。.:*・゜゜・*. こんな感じに切り替わるようにしたかったんです。 サイズの部分等、いろいろ変えられるようなのでいじってみたいと思います。