Tweet｜ ｜ ｜ ｜

[ 1分で読めて簡単導入できます]

画像の拡大と言えば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日