スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSSフィード twitter Google Bookmarks スポンサーサイトをはてなブックマークに登録 はてなブックマーク
タグ /

マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかも

jQueryでゆっくり切り替わるボタン

jQueryとCSSで、ボタンがゆっくりと切り替わるチュートリアルです。とても簡単にできる上に、実用面での使い勝手も良いかもしれません。

まずは、こちらのデモをご覧ください

Demo

マウスオーバーでゆっくり画像が切り替わるのがお分かり頂けると思います。jQueryでシンプルに動かしています。

使用するには、以下のサイトからスクリプトやコードをダウンロードしてください。

フリーのリストアイコン(list icons)配布サイト

Link

もうそこにやり方が書いてありますが、一応チュートリアルです。

既存のブログなどに使用する場合は、

以下のコードを「head」内に書き込みます。

CSSに以下の記述を追加

ボタンを設置したい場所に、以下のHTMLを記述

あとは、以下のjQuery(リンク先でもダウンロードできます)とボタン画像をアップロードすればOKです。

jQueryでゆっくり切り替わるボタンの構造

たったこれだけでスマートなボタンが出来あがるので、

ご興味のある方は試しにどうぞ。

Demo Download

関連記事

RSSフィード twitter Google Bookmarks マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかもをはてなブックマークに登録 はてなブックマーク
タグ / jQueryCSS
コメント一覧

ああ

初心者にはさっぱりわかりません

2010/08/27 Fri 09:32 | URL

Ito

使わせていただきました!ありがとうございます^^

★「CSSに以下の記述を追加」のソースは
 下記が正しいかもしれません。

.button2
{
background: url('http://blog-imgs-35.fc2.com/t/o/s/toshiiy/contact.png');
height:45px;
width:400px;
display:block;
background-position:0 -45px;
}
.button2 a
{
background: url('http://blog-imgs-35.fc2.com/t/o/s/toshiiy/contact.png');
height:45px;
width:400px;
display:block;
}

2011/03/28 Mon 01:04 | URL

管理人

>Itoさん

そうですね、確かによく分からないソースでした。
修正しました、ご指摘ありがとうございます!

2011/04/10 Sun 01:16 | URL

コメントを残す


管理者にだけ表示を許可する

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

リンク

LOOMICDESIGN

タグクラウド

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。