Css image viewerがクリックで移動しています

Question

サイドのタブをクリックすると、画像が変更されますが、ビューが最上部に来るようにページが移動します。私はこれが、ページの内容が以下のようになったときにのみ起こったことに気付きました。この例では、改行の負荷がかかりました。ここで

あなたは私が何を意味するかのより良い例をしたい場合は、私のページがどのように見えるかのリンクです：

dl.dropbox.com/u/8391091/Ebay%20page.html

コードそしてそれはbehavior.Whenあなたはこれらを使用して、デフォルトだ：私はそれは（「＃の画像1」のURLに）フラグメント識別子を使用して、ここだけの画像ビューア（CSS、HTML）のある

  /* Setup Tabs */ 

      #view ul{ 

      margin-top: 0; 
      background: black; 
      width: 85px; /* Width of Tab Image */ 
      float: left; 
      list-style: none; 
      border-right:8px solid grey; 
      } 

      #view ul li{ 

      margin-left: -40px; 
      margin-right: -40px; 
      height:75px; /* Height of Tab Image */ 
      } 

      /* Setup Tab so normal opacity is 40 and rollover is 100 */ 
      #view ul li a img{ 
      border: 0px;  
      /* for IE */ 
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
      filter:alpha(opacity=50); 

      /* CSS3 standard */ 
      opacity:0.5; 

      } 

      /* Change Opacity to 100% on hover*/ 
      #view ul li a:hover img{ 

      /* for IE */ 
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
      filter:alpha(opacity=100); 

      /* CSS3 standard */ 
      opacity: 1.0; 
      } 

      /* Places images to the right of the tabs, 
      and hides non selected images */ 
      #images{ 

      width: 500px; 
      height: 300px; 
      overflow: hidden; /* Hides the non selected images */ 
      float: left; 
      } 

      /* Square border around viewer*/ 
      #wrapper{ 
      outline-style: none; 
      border-top-left-radius: 5px 5px; 
      border-top-right-radius: 5px 5px; 
      border-bottom-left-radius: 5px 5px; 
      border-bottom-right-radius: 5px 5px; 
      -moz-border-radius-topleft: 5px 5px; 
      -moz-border-radius-topright: 5px 5px; 
      -moz-border-radius-bottomleft: 5px 5px; 
      -moz-border-radius-bottomright: 5px 5px; 
      width: 633px; 
      height: 300px; 
      border: 10px solid grey; 
      margin: 0px auto; 
      } 
      </style> 

      <div id="section1"> 
      <div id="view"> 
      <div id="wrapper"> 
      <!-- Tabs --> 
      <ul> 
      <li><a href="#image1" id="tab1"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="125" height="75"/></a></li> 
      <li><a href="#image2" id="tab2"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="125" height="75"/></a></li> 
      <li><a href="#image3" id="tab3"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="125" height="75"/></a></li> 
      <li><a href="#image4" id="tab4"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="125"   height="75"/></a></li> 
      </ul> 

      <!-- Images --> 
      <div id="images"> 
      <div><a name="image1"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="500" height="300" /></div> 
      <div><a name="image2"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="500" height="300" /></div> 
      <div><a name="image3"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="500" height="300" /></div> 
      <div><a name="image4"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="500" height="300" /></div> 
      </div> 
      </div>  
      </div> 
      <p class="text" align="center">(Click tabs at side for larger picture)</p>  
      </div> 

      </br> 
      </br> 
      </br> 
      </br> 
      </br> 

      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      More page content 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 
      </br> 

Answer 1

を入れていますジャンプするリンクは、ページの上部にあるURLにあるidを持つ要素を持ちます。これを修正するには、わかりませんが、今すぐ試してみましょう！ 代わりにこの画像はどうでしょうか？\ http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml ロールオーバーを行い、大きな画像を含むスパンを表示すると、表示が非表示から表示に変更されます。これで普通にやっている方法です。コードを少し変更して、すべての大きな画像をオーバーフローで隠すのではなく、お互いに積み重ねるだけです。

Answer 2

a href="#viewer"> 
<img src="../Photo_Gallery/thumbs/pic1.jpg"> 
<span> 
<img src="../Photo_Gallery/pic1.jpg"> 
<br> 
    optional caption 
</span> 
</a> 

ですので、メイン画像をスパンに入れます。

代わりにラインにすべてのあなたの写真を有するオーバーフローを使用しての彼らはtutorial.Soでそれを行う方法です

.rollover li a span { 
     visibility: hidden; 
} 
.rollover a:hover, .rollover a:hover span, .rollover a:active, .rollover a:active 
span, .rollover a:focus, .rollover a:focus span { 
     visibility: visible; 
} 

：あなたのような隠されたあなたはの上にそれらを配置するために持っているよりも、それぞれのサムネイルの下にdid.Put各1お互い隠されています。しかし、問題は、彼らがそれを行う方法は、画像がページの負荷に表示されていません。ですから、私はそれを修正する方法を見つけようとします。