マウスオーバー時に画像の白黒・カラーを切り替える「jQuery.BlackAndWhite」

公開日:  最終更新日:2015/12/16

マウスオーバー時に画像の白黒・カラーを切り替える「jQuery.BlackAndWhite」
画像をマウスオーバーした際に白黒にしたり、逆に白黒画像をカラーにしたりするのを見たことありませんか。画像の見せ方としては面白いですよね。

以前書いた記事

マウスオーバー時に画像を切り替える方法を紹介しました。
白黒画像とカラー画像を切り替える方法として上記の方法でも可能ですが、画像を白黒とカラーの2つ用意する必要があります。

jQueryのプラグインを使えばカラー画像を1つ準備するだけでマウスオーバー時に白黒、カラーの画像を切り替えることが出来ますので紹介したいと思います。

スポンサードリンク

マウスオーバーで画像のカラーとモノクロ(白黒)を切り替える「 jQuery.BlackAndWhite」

152-3.png
上の画像のように、マウスオーバーした画像の白黒・カラー切り替えをする見せ方が面白そうだったので調べてみました。
カラー画像さえあれば、マウスオーバーした際に自動的に白黒に切り替えることが出来るjqueryプラグイン「jQuery.BlackAndWhite」を使った実装方法やサンプルソースなど紹介したいと思います。

実装方法について「jquery.BlackAndWhite.js」

152-2.png
公式サイトjQuery.BlackAndWhiteでデモなど確認することも出来ます。

jquery.BlackAndWhite.jsのダウンロードより、赤枠のボタンをクリックしてファイルをダウンロードしてください。ダウンロードしたファイルの中からsrcフォルダ内にある「jquery.BlackAndWhite.js」を使います。

140-2.png
また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

基本的な実装サンプル

サンプルソース sample1.html

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.BlackAndWhite.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".bwWrapper").BlackAndWhite({
hoverEffect : true,
});
});
</script>
<style>
.bwWrapper {
position:relative;
display:block;
}
</style>
<div class="bwWrapper">
<img src="画像URL">
</div>

1,2行目でダウンロードしたjquery関連のファイルを読み込んでいます。パスは各自の保存場所に合わせてください。このサンプルは、htmlファイルと同一フォルダにjquery関連のファイルがある状態です。

3行目から9行目がプラグインを実行している部分になります。細かいオプションは指定してない状態なので比較的シンプルな記述になっています。

5行目の.bwWrapperでクラス名を指定していますので、その部分に注意するくらいでしょうかね。

10行目から15行目がスタイルシートの記述です。

17行目から19行目がhtmlタグで画像を指定しています。
ここで<div class=”bwWrapper”> として画像の外側の要素のクラス名を5行目で指定したクラス名と揃える必要があります。このサンプルではdivを使っていますが、他のタグも使用可能です。クラス名を5行目で指定したものを揃えることがポイントです。

基本サンプル

デフォルトが白黒で画像にマウスオーバーした際にカラーになります。

デフォルトの白黒・カラーの変更等のオプション指定

オプションの指定でアニメーションの秒数、デフォルトの白黒・カラーの変更を設定して、複数画像を並べて同様にマウスオーバーでの切り替えを指定してみます。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.BlackAndWhite.js"></script>
<script>
$(document).ready(function() {
$(".bwWrapper").BlackAndWhite({
hoverEffect : true,
invertHoverEffect: true,
speed: {
fadeIn: 300,
fadeOut: 900
}
});
});
</script>
<style>
.bwWrapper {
position:relative;
display:block;
}
ul{
width:620px;;
}
li{
padding: 0;
margin: 0;
float: left;
}
</style>
<ul>
<li class="bwWrapper"><img src="画像URL1"></li>
<li class="bwWrapper"><img src="画像URL2"></li>
<li class="bwWrapper"><img src="画像URL3"></li>
</ul>
<ul> 
<li class="bwWrapper"><img src="画像URL4"></li>
<li class="bwWrapper"><img src="画像URL5"></li>
<li class="bwWrapper"><img src="画像URL6"></li>
</ul>

3行目から14行目でオプションをいくつか指定して実行している部分です。
7行目でデフォルトをカラーにしています。
8行目から11行目でマウスオーバー時のアニメーションの秒数をフェードイン(0.3秒)とフェードアウト(0.8秒)と指定しています。
30行目から39行目で6枚の画像を並べて表示してみました。

このサンプルでは<li class=”bwWrapper”>としてliタグにクラス名を指定してます。画像にリンク設定することも多いかと思うので<a class=”bwWrapper”>としても良いかもしれません。

白黒・カラーのデフォルトを変更サンプル


同じ画像でも白黒とカラーだと印象も変わりますね。比較的簡単に実装出来るのでコンテンツの見せ方の1つとして覚えておいても良いかもしれません。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Comment

  1. 家具屋さん より:

    いつも参考にしています!
    jQueryのみで表<TABLE>の行<TR>やセル<TD>を定期的に動かす簡単な実装方法
    http://peacepopo.net/blog-entry-126.html
    は楽天のページで使わせていただいています。
    こちらの行が移動するサンプルでアイテムに
    簡単に「SOLD OUT」を表示させる方法が何かあればアドバイスをいただければと思います。
    また,http://peacepopo.net/blog-entry-152.html
    の「 jQuery.BlackAndWhite」をもちいて,「SOLD OUT」になった商品画像を白黒にできたらいいと思いました。
    お時間あれば教えてください。

  2. peacepopo より:

    家具屋さん
    コメントありがとうございます。
    > こちらの行が移動するサンプルでアイテムに
    > 簡単に「SOLD OUT」を表示させる方法が何かあればアドバイスをいただければと思います。
    別記事になりますが
    「CSSで画像に吹き出しを重ねて目立たせる方法について調べてみた」
    http://peacepopo.net/blog-entry-133.html
    のような吹き出しで表示する方法はいかがでしょうか?
    SOLD OUTと表示する際の記述変更の手間が少ない方が良いかと思うので
    たとえば、販売中の商品には class="sell" としておいて、売り切れた商品は class="soldout"と
    クラス指定部分のみ書き換える。
    (class="sell" のCSS定義では display:none;として吹き出しを非表示にしておく)
    吹き出しの仕組みを使う使わないに限らず、売れた商品に対してclass名を変更するだけで
    販売中と売り切れの表示を切り替える方法が良いのではと思います。
    ・SOLD OUTの文字、画像を表示・非表示切り替えるとか
    > また,http://peacepopo.net/blog-entry-152.html
    > の「 jQuery.BlackAndWhite」をもちいて,「SOLD OUT」になった商品画像を白黒にできたらいいと思いました。
    SOLD OUTになったら白黒にするというアイデアも面白そうですね。
    また、記事ネタにさせてもらうかもしれません。
    貴重な意見ありがとうございます。

  3. 家具屋さん より:

    .arrow_box{
    top: 0px; /* 記述追加 重ねたい Y位置を指定 */
    left: 0px; /* 記述追加 重ねたい X位置を指定 */
    }
    この記述は,一つ一つの商品ごとに位置を指定するという事でしょうかね?
    jQueryのみで表<TABLE>の行<TR>やセル<TD>を定期的に動かす簡単な実装方法 「行が移動するサンプル」
    http://peacepopo.net/blog-entry-126.html
    こちらの行が移動するアイテムに「SOLD OUT」に吹き出しを作ってみましたが,商品の段が移動すると位置はそのままとなりますね。
    「SOLD OUT」した商品が移動して段から消えると,「SOLD OUT」の表示も消えました。
    そして,繰り返しで,その商品が表示されると,「SOLD OUT」が表示されます。下の段にともに移動してくれると嬉しいのですが。
    また時間があれば教えてください。ありがとうございます。[絵文字:v-16]

  4. peacepopo より:

    家具屋さん
    http://peacepopo.net/blog-entry-133.html
    に掲載しているサンプル
    /peacepopo.net/wp-content/uploads/ftp/133/133-3.html
    をベースに改良してみました。
    サンプル
    /peacepopo.net/wp-content/uploads/ftp/133/133_126.html
    まず、↑↑のサンプルが思ったように動いていますかね?
    いくつかの商品に売り切れの吹き出しを表示しています。
    上記サンプルのソースを確認してみてください。
    改良した点としては
    ・商品を並べるレイアウトをTABLEレイアウトに変更してTRを動かすように変更
    ・CSSの定義を変更(販売中、売り切れの2パターン)
     arrow_box_sell → 販売中
     arrow_box_soldout → 売り切れ
    ポイントとしては、arrow_box_sell では 吹き出しを非表示にしている点です。
    arrow_box_soldout の定義内で 吹き出しの位置、色、サイズ等は調整してみてください。
    通常販売時は各商品の吹き出し部分のクラス名はarrow_box_sellとしておき、
    売り切れたら、売り切れた商品のクラス名をarrow_box_soldoutに変更します。
    通常販売、売り切れ 以外のパターン(おすすめ、再入荷しました等)を用意しておいても良いかもしれません。確認してみてください。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑