smartRollover.jsで楽々ロールオーバー

2009年10月 5日 00:39 | Comments | 0 Trackbacks |

画像をロールオーバーさせる方法は色々ありますが、一押しはCSS HappyLifeさんの『smartRollover.js』。

これ本当に簡単に利用出来ます。
まずは、smartRollover.jsをCSS HappyLifeさんのサイトからダウンロードしサーバへアップ。
そして、利用したいページで読み込ませます。

<script type="text/javascript" src="smartRollover.js"></script>

あとは2種類の画像（通常時の画像とロールオーバー時の画像）を用意する。

通常時：ファイル名_off.拡張子
ロールオーバー時：ファイル名_on.拡張子

最後にhtmlに記述すればあっという間にロールオーバーが完成です。

<img src="ファイル名_off.拡張子" />

サンプルです。
画像の上にマウスをもっていってみてください。

ロールオーバーサンプル

Trackbacks:0

この記事のトラックバックURL：

画像をロールオーバーさせる方法は色々ありますが、一押しはCSS HappyLifeさんの『smartRollover.js』。

これ本当に簡単に利用出来ます。
まずは、smartRollover.jsをCSS HappyLifeさんのサイトからダウンロードしサーバへアップ。
そして、利用したいページで読み込ませます。

<script type="text/javascript" src="smartRollover.js"></script>

あとは2種類の画像（通常時の画像とロールオーバー時の画像）を用意する。

通常時：ファイル名_off.拡張子
ロールオーバー時：ファイル名_on.拡張子

最後にhtmlに記述すればあっという間にロールオーバーが完成です。

<img src="ファイル名_off.拡張子" />

サンプルです。
画像の上にマウスをもっていってみてください。

ロールオーバーサンプル