I tweeked the code to do exactly what I wanted. I got it to fix itself in the screen so that none of the popup image would be off screen and found out how to position it in the screen. Now when I have multiple thumbnails on sceen, I can see all the popouts without having to scroll up or down. Just took some experimentation. I also set the height of the image so it would not exceed the screen.

I placed notes by each attribute I manipulated in the css:

<style type='text/css'>

/* Popout Image Viewer
----------------------------------------------- */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

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

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

.thumbnail span{ /*CSS for enlarged image*/
position: fixed; /* set fixed to keep from moving while scrolling */
background-color: #666699;
padding: 2px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
height: 525px; /* specified to prevent popout from being cut off screen */
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 25px; /* position where popout will display related to top of browser window */
left: 400px; /* pos where enlarged image should offset horizontally */
}
</style>

Thanks for a great example. Use it on my site.

/Per, Giftoverload.com

I have been messing with these photo zoom codes on myspace. A nice little challenge since they do weird stuff with their code...IE the # sign cant be used. I have hit a wall, It will roll over, except its not the image that is rolling over. The rest of the page does a rollover. Anyone have any ideas how to get passed this?

if there is a "select" ,it is error!!
please try it:

<a class="thumbnail" href="#thumb">media/dynamicdrive.gif<span>media/zoka.gif
Simply beautiful.</span></a>
<select><option>湖南<//option><option>北京<//option></select>
<a class="thumbnail" href="#thumb">media/ocean_thumb.jpg<span>media/ocean.jpg
So real, it's unreal. Or is it?</span></a>

I am having an issue when the images pops up. When a link that is towards the right half of paragraph id hovered over, a portion of the right side of the image is cut off.

The paragraph is on a page that is within an iframe that is within a div tag.

I could change

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

to

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

But, If any future links are on the left of a paragraph, they will get cut off on the left.

I need help fixing this to make the popup stay inside the iframe.

NM....

I found a solution....

I made a 2nd style named thumbnailr.

Make one offset 60 and the other -400.. I can just use the style needed depending if the text is left or right

Hey thanks for the code, just one quick tip I recently discovered using your wonderful code. in the CSS section ".thumbnail span" add the attribute "display:none" because if you try using this in a form there is a weird box that interferes with the tab index of the fields, and adding this eliminates this problem. Thanks again for tha code.

I forgot to mention that in the ".thumbnail:hover span" you also need to add "display:block" for the popups to continue working. :)

I'm having a problem with this, when using large popups, how to keep the popup within the boundaries of the user's browser window. Right now, if hovering over an image to the far right of the screen, the popup will simply load off the screen and force the user to scroll over to see it. Ideally I would like it to recognize when it breaks the boundaries of the window.
The User need to scroll the see the image.
I need to put the image in one prescribed position of the screen so that the user need not to scroll the screen to see the image.
Any solution for these?

Apart from Above issue, I am also facing another issue.
On MOuseOVer when the image Pop's Up, the quality of the image is very poor. Does anyone have any solution for this