タイ研修いってきました

JQueryの基本!JQueryを使ってマウスオーバーで画像を切り替える!!

  • このエントリーをはてなブックマークに追加
no Image

マウスオーバーで画像を切替えるときは、どのように切り替えていますか?

CSSで切り替えるよりも、とっても簡単なJQueryをご紹介します♪

どうも、ぶっちです。

JQueryのマウスオーバーで画像を変える

1.まず下記を<head>記述します。

上記が基本コードとなります。

基本コードの間に下記を加えて下さい。

【JQueryコード】

2.次にhtmlコード

【HTMLコード】

Htmlコードはこれだけです。

内にJqueryのコードを書いてしまえば、あとは画像を載せたい箇所に、その都度上記htmlを書くだけで済みます。

※注意※

画像をマウスオーバーで動かすためには、2枚の画像が必要です。

用意頂いた画像には、ファイル名のあとに_offと_onをつけて下さい。

まとめ

如何でしたか?とっても簡単じゃないですか!!

最近は、このJQueryに頼りっぱなしですw

是非、皆さんも使ってみて下さい(^O^)/

この記事を書いた人

岩渕 裕WEBディレクター/マークアップエンジニア

岩渕裕です。アダ名は、ブチです。安い居酒屋が大好きで、渋谷の「一軒め酒場」か「すみれ」で飲んでます。趣味は、「サマナーズウォー」という携帯ゲームです。携帯は、ゲームをするために持っています。どなたか、サマナーズウォーの友達になって頂けませんか?サマナーズウォーをしながら、安い居酒屋でお酒飲みたいです。お願いします。

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。