skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

マウスオーバーで画像を拡大させるJavaScript「MagicalHover」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像の拡大と言えばLightBox・・・と言わずに、こんなJavaScriptはいかがでしょう？
インラインで拡大画像を見せられるMagicalHoverです。

使用方法
MagicalHoverからファイル一式をダウロードします。
<link rel="stylesheet" type="text/css" href="magicalHover-01beta1.css" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="magicalHover-01beta1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id名').magicalHover({speedView:200,speedRemove:400,speedTitle:500});
});
</script>

あとは画像をidで指定すれば完成です。
<p id="id名">
<a href="リンク先"><img src="画像パス" alt="キャプション" /></a>
</p>

※CSSを状況にあわせて調整する必要があります。
マウスオーバーで画像を拡大させるJavaScript「MagicalHover」サンプル

記事作成：2009年05月03日

前の記事：要素に重力を与えられるJavaScript「AvriBubble」
次の記事：フォームの要素にうっすらテキストを表示するJavaScript「jQuery Form Tips」