4

我正在学习如何使用 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。

编辑

有什么功能可以让我选择缩略图的位置并将图片设置为显示在它旁边吗？

4

2 回答 2

4

我为您的网站制作了一个有效的新代码：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 ;
}
于 2013-02-28T13:38:04.880 回答
1

您正在使用 span 元素朝正确的方向思考。

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

同样在图像的宽度和高度中，您通常不使用单位。

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

学习一些html的基础知识。

于 2013-02-28T13:03:18.923 回答