2009年11月26日木曜日

マウスオーバーで拡大画像を表示(jQuery)

スズキです。

こちらのjQueryツールチッププラグインを利用すると簡単にできます。
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

こちらのデモの"An image with a tooltip"がまさにそれって感じです。
http://jquery.bassistance.de/tooltip/demo/

--------【HTML】--------
<link rel="stylesheet" href="/css/tooltip.css" />
<script type="text/javascript" language="javascript"
src="/js/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="/js/tooltip.js"></script>
...
$('#image').tooltip({
  delay: 0,
  showURL: false,
  bodyHandler: function() {
    return $("<img/>").attr("src", "img/suz_large.jpg");
  }
});
...
<img id="image" src="img/suz_small.jpg" />
--------

CSSの読み込みを忘れないように...

いろんなことが中途半端だ...

--------
http://www.suz-lab.com

0 コメント: