image popup - driving me crazy

[threeyzmonkeys]

http://www.dynamicdrive.com/style/cs...p-image-viewer
Can anybody help me with this. I think I'm slowly going insane. I have made the script work, finally, but I can't solve this. I have a line of about 40 tiny images. I need to have the left 20 popups appear to the right of the image and the right 20 to the left. I also can't stop a gap of about 2px appearing between each thumbnail.
This is the script I'm using:

<!-- Source: Dynamic Drive CSS Library -->
<!-- URL: http://www.dynamicdrive.com/style/ -->
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 0px;
left: 200-px;
border: 0;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
<a class="thumbnail" href="#thumb1"><img src="img1.jpg" width="20px" height="20px" border="0" /><span><img src="img1.jpg" /><br />text</span></a>

<a class="thumbnail" href="#thumb2"><img src="img2.jpg" width="20px" height="20px" border="0" /><span><img src="img2.jpg" /><br />text</span></a>
<br />
<br />

If anyone has any ideas I would be grateful.

[jscheuer1]

A gap will appear between the images if there are line breaks in the code, remove them:

<a class="thumbnail" href="#thumb1"><img src="img1.jpg" width="20px" height="20px" border="0" /><span><img src="img1.jpg" /><br />text</span></a><a class="thumbnail" href="#thumb2"><img src="img2.jpg" width="20px" height="20px" border="0" /><span><img src="img2.jpg" /><br />text</span></a>

The href is meaningless, it probably would be better to use:

href="javascript:void(0);"

That way no page reload will occur onclick.

If you want some of the larger images going one way, and some going the other, you would need an additional class with a different left coordinate:

.thumbnail:hover span.lefty{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -160px; /*position where enlarged image should offset horizontally */

}

Add this class to the spans that you want further to the left:

<a class="thumbnail" href="javascript:void(0);"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span class="lefty"><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

[threeyzmonkeys]

Thanks John. You solved all my problems in one. You made it look so easy. I can sleep at last.