Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

画像のロールオーバーをいとも簡単に設置できるJavascript

画像のロールオーバーをいとも簡単に設置できるJavascript

画像のロールオーバーをいとも簡単に設置できるJavascript

画像のロールオーバーの設定は、JavascriptやCSSで設置できますが、jQuery_Auto.jsを導入するだけでいとも簡単にロールオーバーの設定が出来ます。サンプルは、上記の画像にマウスをもっていくと分かります。

ロールオーバーをいとも簡単に設置する流れは以下の通り

jquery.jsとjquery_auto.jsを読み込むためのソースを挿入
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery_auto.js"></script>
※javascriptをアップロードする場所に注意
画像を準備
abc.jpg(もととなる画像)とabc_over.jpg(ロールオーバーしたときの画像)を用意。このとき「_over」が重要。こうしないとうまくいきません。
imgのclassに”Hover”を指定
<img src="abc.jpg" class="Hover" />
以上これだけ。簡単でしょ!
ちょっと待て!jquery.jsとjquery_auto.jsはどこにあるの?
そうですね。一番重要な部分ですが、検索してもらっても出てくると思いますがFireFoxに便利な拡張機能があって、他人のサイトが使用しているjavascriptやcssを丸除きできるというものがあります。(あくまで除くだけ(笑))この拡張機能は後日記述します。
JavascriptやCSSを丸覗きできるFireFox拡張機能
記事掲載しました → 他人のサイトのJavascriptやCSSを丸覗きできるFireFox拡張機能。FireFoxに導入して、私のBlogを覗いてみるとjquery.jsとjquery_auto.jsが丸覗きできます。

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

画像のロールオーバーをいとも簡単に設置できるJavascriptの前後の記事

前の記事は「Web制作者が必ず読んでおくべきBlog Vol.3

次の記事は「無料でベクターグラフィックが手に入るサイト

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.