about

sogo  
fukidasi

  social

Count per Day

  • 77010現在の記事:
  • 435今日の閲覧数:
  • 4現在オンライン中の人数:

jQueryを使いマウスオーバーで画像を変える基本



マウスオーバーのアクションで画像を変化させるという方法はたくさんのサイトで用いられていますが、
今まではCSSで割り当てたりHTMLで直接書いてみたりというのが一般的だったと思います。

ここ近年、jQueryというJavaScriptとHTMLの相互作用を強化する軽量なライブラリが登場したことに
よりjQueryが普及してきましたが、jQueryは難しいとか思われがちです。しかし、基本さえ覚えてしまえばCSSを書くよりも簡単な感覚で覚えられますので、一番初歩的な画像のマウスオーバーアクションをjQueryを使って動かす方法を記事にしてみたいと思います。


jQueryでマウスオーバー?画像を変える?

つまり、こういう事です。

       demo



おそらく誰でも目にしたことがあるかと思います。何故、わざわざjQueryで動かすのが良いのか?って思うでしょうが、ズバリ管理が超楽なことと、jQueryというものを覚えるきっかけにもなるからです。


目次

JQueryの準備と適用

1. JQuery本体を入手(ダウンロード/導入)

2. 基本となるコード

3. 画像のマウスオーバーアクションに応用

4. 番外編、CSSもJQueryも使わずにマウスオーバー(あまりお奨めしない)



1. JQuery本体を入手(ダウンロード/導入)

まずはJQuery本家からJQueryファイル(現バージョン1.6)をダウンロードしご自身のサーバーにアップロードさせる必要があります。サーバーにアップロード?と聞いただけで難しそう・・・・と諦めてしまう方も多いでしょうが、画像をアップロードするのと同じ方法で大丈夫ですので、そんなに深く考えなくても単純な作業です。

流れから言いますと、

JQueryファイルをローカル(自分のPC内の好きな所)に保存→サーバーへアップです。


ブログサービスによっては(Wordpress等)によっては最初からJQueryが導入されている場合もありますので、その場合は新たに導入する必要はありません。


2. 基本となるコードは

<script type="text/javascript" src="js/jquery.js"></script>
となりますので <head> 内に記述します。

さらに、動かす為のスクリプトを上記基本コードに挟み <head> 内に記述します。
すると、こんな感じになります。

<script type="text/javascript">

     $(function(){
          // ここにそれぞれの用途となるコードを書いていく。
     });

</script>

JQueryを使ったプラグインやチュートリアルでもこの形が全ての基本形となりますので覚えておきましょう。


3. 画像のマウスオーバーアクションに応用


3-1 画像変換の為のJQueryコード

$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });
});


3-2 HTMLコード

<a href="#">
     <img src="ここにデフォルト画像URL_off.jpg" alt="hoge" border="0" />
</a>
(もちろん、ボーダーサイズを変更したり画像サイズを指定追記することも可能です)


3-3 画像の準備

画像をマウスオーバーで動かす為には、もちろん2枚の画像(元画像と変更画像)を用意するのですが、
その際に、画像のファイル名の後に_offと_onをそれぞれの画像に付けておきます。

具体的に説明しますと、仮にファイル名を「sakura」とした場合、

マウスオーバーさせる前のデフォルト画像をsakura_off.jpg
マウスオーバー時に変更させる画像をsakura_on.jpg としてアップロードしておきます。

ここで注意が必要なのは_off/_onを除いたファイル名(例:sakura)
と拡張子(例:.jpg)は必ず共通に揃えておいて下さい。



これを「sakura」という画像ファイル名と仮定してまとめてみますと、

<head> 内に書くJQuery
<script type="text/javascript">

$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });
});

</script>


表示させたい場所に書くHTML
<a href="#">
     <img src="images/sakura_off.jpg" alt="さくら" border="0" />
</a>
となります。

これでお判りかと思いますが、一度だけhead内にJQueryコードを書いてしまえば、あとは画像を載せたい箇所に、その都度上記HTMLを書くだけで済みますので、とても楽だと思います。簡単に言ってしまえばJQueryはhead内一括で作業を指定しますので、従来のCSSの役割をもっと簡単に、しかも今までCSSで指定できなかった作業さえもこなしてしまうという便利なアプリケーションと言えると思います。

今回はJQueryの仕組みそのものの説明は省略しておりますが、検索をすればJQueryの構造をより細かく解説しているサイトや動画などもありますので、そちらもご覧頂ければ今回の当記事にしたマウスオーバーで画像を変えるというお題もより簡単に理解できるかと思います。






[番外編] JQueryやCSSを使わずにマウスオ-バーで画像を変化させる方法

どうしてもJQueryの仕組みがわからいとかCSSに依存させたくないという場合には、HTMLのみで画像マウスオーバーを表現する方法もあります。テキストにマウスオーバーという事は出来ませんが、画像にマウスを乗せるという形であればJavascriptで簡単に実現できます。

<img alt="Sample" width="任意px(省略可)" height="任意px(省略可)" src="元画像URL"
onmouseover="this.src='変更画像URL';" onmouseout="this.src='元画像URL'">

上記スクリプトを表示させたい場所に書くだけですのでCSSは不要ですが、一番の難点はソースが長くなってしまう事と、どうしてもJQueryと比べると、マウスを置いたときの反応がワンテンポ遅れてしまう事です。

一度スクリプトを読み込むとJQueryと大差はないようですが、やはり今となってはやや原始的と言わざるを得ないかなぁと思います。一応、参考までにと書いてみました。



プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションの応用


Pocket

  • […] jQueryを使いマウスオーバーで画像を変える基本 | ニトなび […]

  • jQueryを使いマウスオーバーで画像を変える基本 | ニトなび

  • 複数枚の画像をアニメーションのように動かす事ができないのですが、よい記述例はありますでしょうか?
    2枚目を.gifでやろうと思っていたのですが、gifはまた違うコードを書かないといけないのですか?
    2枚目を.gifでやる事が初心者には難しいのであれば、_on,_on2,_on3のように複数枚のjpgでやりたいのですが、どうでしょうか?
    どう説明していいかわかりませんが、画像の上にマウスが乗った時、gifのように複数枚画像が切り替わっていってほしいです。

  • satoshi さま

    コメントありがとうございます。
    GIFアニメのように動いて変化しながら切り替わっていくという感じでしょうか?
    マウスオーバーでそのようなアクションをするには、おそらくそれなりのプラグインを入れる必要性があるかと思います。
    ただ、特に難しくなく複数画像を動かすという方法ですと以下URLの記事が参考になるかもしれません。
    http://express.nippondesign.co.jp/jquery-thumbnails-fadein-fadeout-1062.html
    それ以外の方法ですと、勇士達が開発したプラグインに委ねるしかありませんので、
    ”jQuery” “プラグイン”で検索するとお望みのものが見つかるかもしれません。

  • […] jQueryを使いマウスオーバーで画像を変える基本 […]

  • […] jQueryを使いマウスオーバーで画像を変える基本 […]

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。