Step.100 - カーソルが触れると別画像を変更させる (フェードイン効果)


サムネイル画像にマウスカーソルが触れると別画像をフェード効果を付けて変更/表示させます。


Step テーマ
● document.getElementById( "id属性のID名" ).className : class名を変更する
● document.querySelector( "CSSのクラス名" ).className : class名を変更する

実行例




リスト


<style type="text/css"><!--
.fadeout{
opacity: 0;
transition: 0.15s ease-in-out;
-webkit-transition: 0.15s ease-in-out;
}
.fadein{
opacity: 1;
transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
// --></style>
<SCRIPT type="text/javascript"><!--
// マウスが乗ったので 指定の画像を表示させる
function myChgPic( myPicURL ){
document.myBigImage.src = myPicURL; // 画像を表示
document.getElementById ("idBigImage").className = "fadein"; // fadein へ変更
}
// マウスが離れたので 画像を消去
function myClearPic(){
document.getElementById ("idBigImage").className = "fadeout"; // fadeout へ変更
}
// --></SCRIPT>
<table border="0">
<tr><td align="center" colspan="4"><DIV id="idBigImage" class="fadeout"><img name="myBigImage" src="IMG_088.gif" width="320" height="240"></DIV></td></tr>
<tr>
<td><A href="javascript:void(0)" onmouseover="myChgPic('IMG_0141.gif')" onmouseout="myClearPic()"><IMG src="IMG_0141s.gif" width="100" height="75"></A></td>
<td><A href="javascript:void(0)" onmouseover="myChgPic('IMG_0400.gif')" onmouseout="myClearPic()"><IMG src="IMG_0400s.gif" width="100" height="75"></A></td>
<td><A href="javascript:void(0)" onmouseover="myChgPic('IMG_0667.gif')" onmouseout="myClearPic()"><IMG src="IMG_0667s.gif" width="100" height="75"></A></td>
<td><A href="javascript:void(0)" onmouseover="myChgPic('IMG_0679.gif')" onmouseout="myClearPic()"><IMG src="IMG_0679s.gif" width="100" height="75"></A></td>
</tr>
</table>


サンプルだけの HTMLは こちらへ

Q&A

[Q] CSS3を使ってリンク画像に hover したら、別画像に transition 効果を掛けたいのですが。
[A] 当サイトに質問ということは、JavaScript を使いなさいっことですね？

説明

JavaScriptなしでも タグと CSS3 だけで駆使すれば 実現できますが、当コンテンツは JavaScript講座なので 得意分野で楽をします。(^^;
また、人様が作った jQuery パーツは、当サイトでは扱いませんので、作成者のサイトにて質問してください。

Step.98 に CSS3 の transition 効果を乗っけて、画像表示にフェードイン・フェードアウトを付けてみます。
追加したのは、フェードイン・フェードアウトのCSS3 と、その切り替え処理です。
あとは、myBigImage の IMGタグを DIV で囲ったくらいです。
<DIV id="idBigImage" class="fadeout"><img name="myBigImage" src="IMG_088.gif" width="320" height="240"></DIV>

フェードイン用の fadein、フェードアウト用の fadeout の2つのクラス(スタイルシート)を用意しました。
中身は opacity の 透明(0) / 不透明(1) で
transition にて 1秒かけてフェードイン、0.15秒かけてフェードアウトするという 単純な仕掛けです。
.fadeout{
opacity: 0;
transition: 0.15s ease-in-out;
-webkit-transition: 0.15s ease-in-out;
}
.fadein{
opacity: 1;
transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
SF だけは まだ 専用のプレフィックス(-webkit) がないと動かないみたいなので 残しています。
あとの IE10、FX、OP、GC は 専用プレフィックスなしを使います。IE9以下は早くも見捨てます。


今回のサンプルでは、onmouseover時に fadein 、onmouseout時に fadeout が動作するようにします。
● onmouseover時 (myChgPic)
document.getElementById ("idBigImage").className = "fadein"; // fadein へ変更
 
● onmouseout時 (myClearPic)
document.getElementById ("idBigImage").className = "fadeout"; // fadeout へ変更


class属性の属性値を変更するには、
● id属性の属性値を指定してクラス名を変更する場合
document.getElementById( "id属性のID名" ).className = "クラス名"

● class属性の属性値を指定してクラス名を変更する場合
document.querySelector( "CSSのクラス名" ).className = "クラス名"
例: document.querySelector( ".fadein" ).className = "fadeout"
※ class名がマッチした最初の要素を返します。
で、変更します。

この2つさえあれば、CLASS指定を JavaScriptから操れるってことです。


参考ステップ
Step.98 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょう その２
▲TOP