Css圖片查看器正在移動頁面點擊

當我點擊側邊的標籤時，它會更改圖片，這是我想要的，但它也會移動頁面，使視圖位於頂部。我注意到這隻發生在下面的頁面內容時，這就是爲什麼在這個例子中我已經加載了換行符。Css圖片查看器正在移動頁面點擊

這裏是我的頁面的外觀，如果你想要的是什麼我的意思是更好的例子像一個鏈接：

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

代碼我已經把這裏只是圖像瀏覽器（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>

來源

2011-11-11 OllieT

它使用片段標識符（URL中的：「＃圖像1」）和它的behavior.When你使用這些默認跳躍鏈接，它帶來了頁面頂部的url中的id元素。現在修復，我不知道，但我現在就試試吧！這個怎麼辦？\ http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml 你可以做一個翻轉，並有一個跨度的大圖改變它的可見性從隱藏到可見。這就是你通常這樣做的方式。你只需要改變一下你的代碼，把所有的大圖片堆疊在一起，而不是用溢出來隱藏。

來源

2011-11-11 17:04:24

您是否知道修復它的代碼，並且我的查看器會看起來有什麼不同？ – OllieT

不是。點擊圖片，用戶只需要懸停。 – 2011-11-13 16:32:21

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

所以你把主畫面放在一個範圍內。

.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; 
}

這就是他們如何做到這一點的tutorial.So而不必在所有行你的照片，並使用溢出：隱藏像你did.Put其相應的縮略圖下的每一個比你必須將它們放置在頂部彼此隱藏。但事情是，他們這樣做的方式，頁面加載時沒有圖片顯示。所以我會嘗試找到一種方法來解決這個問題。

來源

2011-11-13 16:39:52

Css圖片查看器正在移動頁面點擊

回答

相關問題