缩略图翻转图像仅显示在屏幕左侧

Question

我正在学习如何使用Dreamweaver CS6设计网站。我想制作一个在页面上显示缩略图的照片库，但是当您将鼠标滑过它们时，它会在左侧显示完整大小的图像，并在缩略图上显示一点点。这是我在搜索网络时发现的（可能在这里找到了，但我不记得是谁发布的，所以如果你发布了它，所有的功劳都归功于你）。

我在我的HTML代码中得到了这个：

   <table>   
   <tr> 
   <td>  
        <a class="thumbnail" href="#thumb">
           <img src="productURL" width="100px" height="142px" border="0" />
           <span>
              <img src="productURL" />
              <br />
              <font face="arial">productname
              </span></a>
           </font>
    </td> 
    <td>  
        <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span>
        <img src="productURL" /><br /><font face="arial">
        productname</span></a></font>
    </td> 
    <td>  
        <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span>
        <img src="productURL" /><br /><font face="arial">
        productname</span></a></font>
    </td> 
    <td> 
        <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span>
        <img src="productURL" /><br /><font face="arial">
        productname</span></a></font>
    </td>  
    </tr>  
    <table>  

然后在我的CSS上：

.thumbnail{    
position: relative;    
z-index: 0;    
}

.thumbnail:hover{    
background-color: transparent;    
z-index: 50;    
}

.thumbnail span{     
position: absolute;    
background-color: lightyellow;    
padding: 5px;    
left: 1000px;    
border: 1px dashed gray;    
visibility: hidden;    
color: black;    
text-decoration: none;    
}

.thumbnail span img{     
border-width: 0;    
padding: 2px;    
}

.thumbnail:hover span {    
visibility: visible;    
top: 300px;    
left: 107px;
}

我认为这是一个非常好的代码，但我无法弄清楚如何使图像弹出缩略图旁边。我试图创建一个名为“span_2”的“子类”，但它没有出现，并且整个页面都搞乱了。

我认为这是一个很大的问题，但我需要帮助。本周我开始玩HTML。

编辑

是否有任何功能我可以选择缩略图的位置并将图片设置为紧挨着它显示？

Answer 1

我为您的网站制作了有效的新代码：http://jsfiddle.net/sMLbP/4/

有HTML：

<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>
<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>
<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>
<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>

[更新]有CSS：

.container_image {
    float:left;
    position:relative;
    margin-right:20px;
}

.container_image:hover{
    cursor:pointer;
}

.container_image .image {
    position: absolute !important ;
    background-color: lightyellow;
    border: 1px dashed gray;
    top: -1000px !important ;
    z-index:10 !important ;
}

.container_image:hover .image {
    left: 100px !important ; 
    top:0px !important ;
}

Answer 2

你正在考虑使用span元素在正确的方向。

查看display:block;它会使页面的任何元素表现为块元素（例如div）

另外，在图像的宽度和高度上，您通常不使用单位。

转到这样的在线资源：http://www.w3schools.com/html/default.asp

学习一些HTML的基础知识。