WEB制作テクニック

imgPreview
SAMPLE
うちのわんこです

わかりやすく解説しているサイトがありますので、以下を参考にしてください
参考サイト（外部サイトです）
　jQueryでマウスオーバー時に画像を表示する imgPreview
　http://www.css-lecture.com/log/javascript/034.html



簡単に説明します。
http://plugins.jquery.com/project/imgPreview=
※2012年7月17日現在ダウンロードできないようです。
のDownloadをクリックするとテキストデータが表示されるので名前をつけて保存します。
参考サイトのように　imgpreview.js　とつけましたら
ヘッダー内に
jQueryのリンク＋imgpreview.jsのリンクと設定を記述すればOKです
<!--jQueryをgoogleから読み込んでいます -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<!--imgpreview.jsをリンクを設定 -->
<script type="text/javascript" src="js/imgpreview.js"></script> 
<!--imgpreview.jsの設定 -->
<script type="text/javascript">
$(function(){
      $('a').imgPreview({});
});
</script>
後は画像のリンクを貼るだけでOKです。
参考サイトではCSSのidをつけています。
そうすることにより箇所により表示を切り替えることが可能になります。


以下はリンク先にマウスを乗せると画像が出るというやり方です。
Google
ヘッダー内に以下を記述します。
<!--jQueryのリンクを設定。googleから読み込む形式でも可。お好きな方で！ -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--imgpreview.jsのリンクを設定 -->
<script type="text/javascript" src="js/imgpreview.js"></script> 
<!--imgpreview.jsの設定 -->
$(function(){
      $('a').imgPreview({
//CSSでIDを設定している場合、同じものを入れる？ちょっとよくわかりませんでした。省略も可能？みたいです。
      containerID: 'imgPreviewWithStyles3',
      srcAttr: 'rel',
//省略可能です。CSSで表示される画像のサイズを設定しています。
      imgCSS: {
      height: 200
      },
      onShow: function(link){
      $('' + link.href + '').appendTo(this);
      },
      // When container hides:
      onHide: function(link){
      $('span', this).remove();
      }
      });
});
</script>
リンクの設定を以下のようにします
<!-- rel=""内に画像のアドレスを記述します。 -->
<a href="http://google.co.jp" rel="img/imgpre.jpg">Google</a>



上へ