so, i find some bugs in my script..
bugs fixed :
http://www.sevoir.hu/gallery2.zip
join it ;-)

thx a lot for css drive, for 1st script !

tried it on my myspace but the larger image isn't hidden. Can someone tell me how to get this code to work on myspace?

Thanks for the great code! One thing I like to do is to add this: .thumbnail span {white-space: nowrap;}. Makes the text under the picture stay on one line.

I have multiple images that scroll all the way down the screen and when you hover over the bottom images they doesn't appear in the screen, how can I get it to display on screen?

Hello. I have a template that I am editing in Macromedia Flash MX. I have pictures that I have entered into the timeline. I want to add little pop up window of text on rollover that tells about the photo & goes away once you move the mouse away from text. ie My kids photos to say name, ages and birthdate. Could you tell me where I would enter this information and how exactly do i do this? I have been doing good so far on my personal site. I purchased my template from online. Thanks fo your help.

I made a slight modification in the code for cross-browser compatibility to allow me to integrate this into a scrollable sidebar (I use a mod of 456 Berea Street's CSS Frames (http://www.456bereastreet.com/lab/cssframes/). Because of inconsistency in position:absolute across browsers the problem was (in Firefox) the popup was being rendered relative to the top of the physical html file rather than to the top of the viewable area resulting in the popup being further out of the frame as the page was scrolled down (in IE, it worked fine). This simple fix allowed vertical scrolling to be independent of popup position. Change the original CSS in this section:

.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*/
position:fixed; /* <--added for Firefox/Mozilla
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

and adding this in the head of the html document:

<!--[if IE]>
<style type="text/css">
.thumbnail:hover span{ /*CSS for enlarged image*/
position:absolute;
</style>
<![endif]-->

solved the problem. This has been tested in IE 5.5 and 6 on Win98 and XP and Mozilla and Firefox on Win98, XP and Mac OS X (also works in Safari). Other browsers should work as well, but I would welcome anyone with other browsers to test this and comment here. You may see my implementation of this at http://www.firstchurchofgodindependence.org

This may have been fixed in IE7, but I have an aversion to installing MS betas on my box. If anyone has IE7 installed, I would be interested in knowing if this hack causes any undesired effects. Of course the simple fix would be to replace [IF IE] with [IF<IE7] if IE7 is affected.

Great Job! My only problem:

I want to have the hovered pop-up image open directly next to the link/thumb that activated it. I have not seen anyone ask about this or to offer a suggestion.

I really cannot use the offseting part of the script to get it to work.

Please help! Thanks in advance.

Response to my own response:

a possible solution I just found out is to set:

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

So, change the 0 and 60px value to auto and auto. That will open the hovered image RIGHT next to the thumb. I still have not found a way to open it next to the thumb but, say, 10-15 pixels to the right.


ANY thoughts on this? Reply ahead... Thanks.

Thank you MrSpock

Very elegant script and your last fix is exactly what we’re looking for. If you want to see life site with your script implementation then visit www.amray.com web directory, go to any category and move mouse over thumbs.

One request. Can you come up with drop shadow for popup images?

Thanks again

Is it possible to change the size of enlarged image in the script so that i wont need to resized the original image?