2011-07-27 6 views
-1

私は、以下に示すサンプルに似た「イメージディスプレイ」スクリプトを探しています。小さな画像をホバリングすると、画像が大きく変わります(Amazon.com、eBayなどのeコマースのウェブサイトに似ています)。製品用のJavaScriptイメージボックス

これを行うライブラリ/コードはありますか?ここ

例1

Example 1 ---------------------------------------------------------

例2

enter image description here

+1

このCSS、PHPまたはJavaScriptに関する質問はありますか?すべてが一緒ならば、そこには何百万ものギャラリーがあります。 「ホバーの大きなボックスに画像を表示する方法」に関する質問があれば、最も単純なことは 'document.getElementById( 'largeImage')。src = this.src;'です。より具体的にしてください –

答えて

2

それは大きな画像

を変化させるより小さな画像をホバリングするときの小さい例であります
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('.smallImage').hover(function() { 
      $('.bigImage').attr('src',this.src); 
     }); 
    }); 
    </script> 
    <style> 
     .bigImage { 
      width: 100px; 
      height: 100px; 
      display: block; 
     } 
     .smallImage { 
      width: 50px; 
      height: 50px; 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <div id="imagesDiv"> 
     <img class="bigImage" src="Blue hills.jpg"></img> 
     <img class="smallImage" src="Blue hills.jpg"></img> 
     <img class="smallImage" src="Sunset.jpg"></img> 
     <img class="smallImage" src="Water lilies.jpg"></img> 
    </div> 
</body> 
</html>