ロールオーバーした時に画像が切り替わる時間について

質問

ロールオーバーしたときに、画像が切り替わる時間が違うものがあります。

Webサイトによっては、グローバルメニューの時は瞬時に切り替わるが、他の画像の時はスローで切り替えたりしています。

例えば、次のサイトでは、スライドショーの左側にある3つの画像はスローで切り替わっております。
http://www.treasurekaitori.com/

私は、HTMLとCSSを使い、瞬時に切り替えることはできたのですが、スローで切り替える方法がわかりません。

もしかしたら、いろいろな方法があるのかもしれません。
いろいろな方からのご教示をお待ちしております。お願い致します！！

回答No.5

ORUKA1951 · ベストアンサー

＞このロールオーバーは画像を切り替える方法ではないという理解で合っておりま
すでしょうか？
　いいえ背景を変えることもできますし、要素を加えることでフェードアウトフェードインもできます。
　工夫してみなさい。

お礼

わかりました、先生。
いつも、ありがとうございます。

回答No.4

ORUKA1951

ちょっと時間が取れたので、ごく簡単なサンプル書いておきます。
<div class="nav">
　　<ol>
　　　　<li><a href="/">TOP</a></li>
　　　　<li><a href="/product">PRODUCT</a></li>
　　　　<li><a href="/profile">PRIFILE</a></li>
　　　　<li><a href="/contact">CONTACT</a></li>
　　</ol>
</div>
というナビゲーションリストがあるとします。
まず、普通にリストをブロックにしておきます。高さは画像サイズに合わせておきます。
div.nav ol,div.nav ol li{
　　display:block;list-style-type:none;
　　margin:0;padding:0;
　　text-align:center;line-height:40px;line-height:40px;
}
div.nav ol li{
　　width:190px;height:40px;
　　position:relative;
　　background-color:silver;/* これが画像の下に透けて見える。 */
}
div.nav ol li a{
　　display:block; /* inline要素をblock要素に変えます */
　　width:100%;height:100%;
　　opacity:0.5;
　　color:black;
　　background-color:white;
}
div.nav ol li a:hover{opacity:1;}
ここまでが、色を変えるスタイルシートです。
opacity--透明度を0.5から1.0に変化させています。
実際にはa要素を透けて下のsilverが見えているだけです。

これに時間的変化を入れて見ます。
transition-property: opacity; /* 時間的変化を適用させるプロパティ */
transition-duration:2s; /* 変化に要する時間 */
transition-timing-function:ease-in-out; /* 変化のテンポ */

　ここまで出来たら、画像にします。
div.nav ol li a{
　　display:block; /* inline要素をblock要素に変えます */
　　width:100%;height:100%;
　　opacity:0.5;
　　color:transparent; /* 色を透明にします */
/*　　background-color:white;*/ /* これはなし */
}
各リンクに背景画像としてボタンを指定します。
div.nav ol li a[href="/"]{background-image:url(./images/navi/Top.png);}
div.nav ol li a[href="/product"]{background-image:url(./images/navi/Product.png);}
div.nav ol li a[href="/profile"]{background-image:url(./images/navi/Profile.png);}
div.nav ol li a[href="/contact"]{background-image:url(./images/navi/Contact.png);}

これでよいでしょう。
CSS3のtransitonを理解しないブラウザには瞬時に変化する形になります。
テキストブラウザや携帯電話、検索エンジンには通常のリンクとして表示されます。

★ブラウザベンダーフィックスを付け加えておくと完璧でしょう。
div.nav ol li a{display:block;width:100%;height:100%;color:transparent;opacity:0.5;
transition-property: opacity;
-moz-transition-property: opacity;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
-ms-transition-property: opacity;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
-ms-transition-duration:2s;
transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
}

★必ず一行ずつ宣言を追加して、理解しながら進めてください。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

お礼

ありがとうございます！！
サンプルを参考にし、CSSを書いてみたのですが、できませんでした・・・

まだ私のレベルではサンプル全体を理解することが難しいので、私の書き方が間違っているのだと思います。

でも非常に参考になりました！！

ちなみに、このサンプルでは、色を変えたり、時間を変えたりする命令文がありますが、このロールオーバーは画像を切り替える方法ではないという理解で合っておりますでしょうか？

補足

ありがとうございます！！
サンプルを参考にし、CSSを書いてみたのですが、できませんでした・・・

まだ私のレベルではサンプル全体を理解することが難しいので、私の書き方が間違っているのだと思います。

でも非常に参考になりました！！

ちなみに、このサンプルでは、色を変えたり、時間を変えたりする命令文がありますが、このロールオーバーは画像を切り替える方法ではないという理解で合っておりますでしょうか？

回答No.3

tracer

すべての方法を列挙すると、

・Flash
・JavaScript
・CSS3

の3つの方法があります。
CSS3を用いる方法が一番簡易ですが、すべてのブラウザで動作するわけではありません。特にInternetExplorerでの動作は諦めてください。ただ、動作しないといっても致命的なエラーになるわけではなく、ただ動作しないだけなので、この程度のエフェクトならあまり問題にはならないかもしれません。
参考までにCSS3での実装説明のURLです。
http://www.css-lecture.com/log/css3/css3-transition.html

本文を見る限り、FlashやJavaScriptでの実装は方向が違うようなので、カテゴリーを変えて質問をされるとより明確な回答がつくかもしれませんね。

お礼

ありがとうございます！
もっと、いろいろと勉強をします！！

回答No.2

ORUKA1951

CSSで行うなら、CSS3にある時間的変化の
Transitions プロパティ( http://www.w3.org/TR/css3-transitions/ )
を使います。

お礼

ありがとうございます！！

回答No.1

zozokegatatu

これ、FLASH使ってますけど？
FLASHなら変化時間は自由に好きなだけ設定できます。

お礼

ありがとうございます！！
補足させて頂きたいのですが、フラッシュを使わない方法がありましたら、教えて下さい！！

補足入力にも追記さえて頂きました！！

補足

補足させて頂きたいのですが、フラッシュを使わない方法がありましたら、教えて下さい！！