ITASSIST

ページを作成する中でボタン等に対してマウスオーバーによるボタンの表示切替を簡単にセットできるプラグインです。

ダウンロード

http://www.itassist.info/modules/d3downloads/index.php?page=visit&cid=3&lid=1

http://www.itassist.info/modules/d3downloads/index.php?page=visit&cid=3&lid=2

http://www.itassist.info/modules/d3downloads/index.php?page=visit&cid=3&lid=4

※バグが有ったので差替えました。

利用方法

1.対象の画像やエリアにマウスオーバーで色を重ねる場合

例）

ページのヘッダーで以下を記載します。（javascriptファイルへのパスは環境へあわせてください）

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.autoHover.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.maskover').maskover();
});
</script>

マウスオーバーさせたいタグのクラスに「maskover」をセットします。

<div class="maskover" >テスト</div>

これで、divタグにマウスを重ねると白い網かけがかかるようになります。
この例ではdivタグに対してセットしましたが、imgタグやその他ブロック要素に対して適用することができます。

2.対象の画像をマウスオーバーで切り替える場合

例）

autohoverテスト画像

先ず、マウスオーバー用画像と通常表示用の画像を以下を用意しファイル名を

通常画像：hogehoge.jpg

マウスオーバー画像：hogehoge_hover.jpg

のように、通常画像の拡張子（.jpg、.png、.gifなど）の前に「_hover」を付ける形で作成します。

次に、ページのヘッダーで以下を記載します。（javascriptファイルへのパスは環境へあわせてください）

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.autoHover.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.rollover').autoHover();
});
</script>

マウスオーバーさせたいタグのクラスに「rollover」をセットします。

<img src="***" class="rollover" />

これで、画像のマウスオーバーが実装されます。この例ではimgタグに対してセットしましたが、
input type=imageやその他src属性で画像ファイルをしていするタグであればどのタグにでもセット可能です。