4

Dreamweaver CS6 を使用して Web サイトをデザインする方法を学んでいます。ページにサムネイルが表示されているフォト ギャラリーを作成したかったのですが、マウスをそれらの上に置くと、サムネイルの左側と少し下にフル サイズの画像が表示されます。これは私が Web を検索しているときに見つけたものです (おそらくここで見つかったのですが、誰が投稿したか覚えていないので、投稿した場合はすべてあなたの功績が認められます)。

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

スパン要素を使用して、正しい方向に考えています。

それを調べdisplay:block;て、ページの要素がブロック要素（例：div）として動作するようにします

また、画像の幅と高さでは、通常は単位を使用しません。

次のようなオンライン リソースにアクセスしてください: http://www.w3schools.com/html/default.asp

htmlの基礎を学びます。

于 2013-02-28T13:03:18.923 に答える