マウスオンで画像を拡大させてクリックもできるjQueryツール

■やりたいこと
・マウスオンの際に画像を拡大
・拡大した画像をクリックできる

■最終的に参考にさせて頂いたサイト
・マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」 | Web活メモ帳

最初は、簡単にCSSでできないかな？とおもって、以下のサイトを参考にテストしました。
・CSSだけで作るマウスオーバーでの画像の拡大 | CSS-EBLOG

「これだ！」と思ったんですが、「IE だとクリックが正常に動かなくなるみたいです」とのコメントが・・。

実査に、自分の環境でもテストしたんですが、IE8はO.K.みたい。
IE7やIE6がNGっぽい。（IETesterの結果、怪しいけど。。）

まだ、IE7やIE6多いですからね～。

ということで、CSSはあきらめて、他の方法を模索。
で、たどり着いたのがjQueryです。

注意点は、ヘッダー。

<script type=”text/javascript” src=”jquery.min.js　←　jQueryの場所”></script>
<script type=”text/javascript” src=”jquery.bubbleup.js　←　bubbleup.jsの場所”></script>

をしっかり書いて、その後に、自分の環境に合わせたタグやIDの情報を書く。
scaleの値が、マウスオン時の拡大された画像の大きさ。

<script type=”text/javascript”>
$(function(){

    $(“div#campain ul#popup li img”).bubbleup({tooltip: true, scale:100});
    
});
</script>

 後は、CSSの調整で微調整。