マウスオーバーで画像を拡大させる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サンプルページ一覧

skuare.net