csshtmlthumbnailsdreamweaverrollover

<HTML> Thumbnail rollover image is appearing only in the left of screen

I'm learning how to design a website using Dreamweaver CS6. I wanted to make a photo gallery that has the thumbnails shown on the page, but when you roll the mouse over them, it displays the full sized image on the left and a little bellow of the thumbnail. Here's what I found while searching the Web (it was probably found here, but I don't remember who posted, so if you posted it, all the credit goes to you).

I got this in my HTML code: 

   <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>

And then this on my 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;
}

I thought this was a pretty good code, however I can't figure out how to make the image pop up right next to the thumbnail. I tried to create a "subclass" called "span_2" but it didn't come out right, and messed the whole page.

I think this is a big question, but I need help. I started playing around with HTML this week.

EDIT

Is there any function where I can pick the location of the thumbnail and set the picture to be displayed right next to it?

Solution

  • I make a valid new code to your website : http://jsfiddle.net/sMLbP/4/

    There is 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>

    [UPDATED] There is 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 ;
}