I had problems getting this work properly with Safari on the Mac and IE on Windows. I ended up wrapping each image in a div named "galleryimage" and then used the following code:

#galleryimage {
position: relative;
z-index:0;

}

.thumbnail {
display:block;

}


.thumbnail:hover{
position:relative;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background: #fff;
padding:5px;
left: -1000px;
border:1px solid #000;
display:none;
}

.thumbnail span img{ /*CSS for enlarged image*/
padding:2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
display:block;
top:10px;
z-index: 50;
left: 10px;
}


Seems to work great now. Before, even with the example posted by the author, the hover/popup image wouldn't render properly in Safari. I had to add display:block to the .thumbnail class, or else the image would pop up but be cut off on the ends.

Script in firefox perfectly works but in ie6 with himself not to make work it: ((

Great!.. I like this efficient yet creative action..

I want to app this to myspace.. i have a overlay on the (corp)myspace and only the images are displying not just thumb and it to mouse over etc.. but i will get it working hopefuly..

Thanks and I have created you as a favorite upon my links.. but you get the web bowser toolbar link .. your that special lol! Peace

Very useful and powerful scripting!!! But am I the only one who has problems with blue lines probably due to the <a href>-tag?

There are blue lines all over the place, which of cause turn purple when visited.

Does any one know how to remedy that?

Thanks!

Try this dude... just Replace the "Black Forest"text which will be the hover and or in this case a link also.. change hover in the code to click if you want it to click to view pick.. chacge colors for pic bgd and text etc,, p[lay with it..

I have one problem with this though.. If someone could tell me .. If placed within a paragragh i place this code and after the codes end i still have my paragraph text to cont.. how do i continue it with out my text skipping a line and change colors lik the link.. I want it to revert right after the following and continue my paragraph.. it seems to be a simple closing and openening but where and what type..



Or use this generator... u will need firefox to use it http://www.layoutcodez.net/popmessage/






[<style type="text/css">.kmqkzpubspk {
display:block;
background-image:url('http://www.adamscandy.com/Images/Products/bigImg/black forest300.gif');
width:184px;
height:318px;
}
.kmqkzpubsp {
display: none;
}

a.kmqkzpubspl:hover {
border-width: 0;
}
.copyright {
font-size:8px;
font-weight:bold;
color:FFFFFF;
position:absolute;
top:-1px;
left:50px;
}
.kmqkzpubspl {
position: relative;
background-color: #444444;
text-decoration: none;
color: khaki;font-weight:bold;
}.kmqkzpubspl:hover .kmqkzpubsp {
display: block;
position: absolute;
width: 184px;
background-color: #444444;
padding: 1px 3px 2px 3px;
border: 1px 000 solid;
font-size: 0.8em;
left: 2em;
top: 0.5em;
cursor:default;
}
.kmqkzpubspl { cursor:default; }

</style>
<a class="kmqkzpubspl" href="http://www.adamscandy.com/index.cfm?page=Details&Product_ID=431">Black Forest<span class="kmqkzpubsp"><span class="copyright">Luke Says</span><div class="kmqkzpubspk"></div> These are the best Gummies on Earth... Always make a good present for birthday's .."hint ,hint!.." </span></a>]

Thanks for the inspiration, Luke!

I've worked out at solution to the stupid link decoration, which made my text below the picture look like sh.t!

Just add: text-decoration: none; like below

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

This should fix it!

Program worked great on IE7 Beta, and I also added in the javascript so that the image could be moved around by the viewer (be sure to change the background and border to transparent).

But on a different PC the image only pops up when the user does a right mouse click and selects properties. Weird.

The frame on the pop-up window in Firefox does not go completely round the image...seems to cut on the right side of the thumb.

Also the position of the pop-up is lower in Firefox.

Any suggestions?

Isn't it a bitch that these browsers do not have a common standard. If I had a Euro for every hour I've tried to make things work in IE and Firefox, I probably could retire and live happily ever after now! ;-)

My advice is, that you work out a solution - a compromise - that fits both IE, Firefox, Opera etc. I think it is possible if you play with the padding-element of the css-code. There is a different response to padding with the two browser - this could do the trick. I hope this gives you the inspiration to make it work.

I believe Luke provided the solution that I was looking for. Thanks Luke! I used his modded script and removed the background color and border. I then added in the other javascript so that a visitor could move the popped up image anywhere around the webpage.

First:
put this line between the <head> and </head> section of your html:

<script type="text/javascript" src="dom-drag.js"></script>

Second: Go here and download the dom-drag.js and place it in the same directory as your main pages:
http://www.dynamicdrive.com/dynamicindex11/domdrag/

Third:
Use Luke's mod (where I took away the backgrounds)
<style type="text/css">

#galleryimage {
position: relative;
z-index:0;

}

.thumbnail {
display:block;

}


.thumbnail:hover{
position:relative;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background: transparent;
padding:5px;
left: -1000px;
border:1px transparent;
display:none;
}

.thumbnail span img{ /*CSS for enlarged image*/
padding:2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
display:block;
top:10px;
z-index: 50;
left: 10px;
}

</style>


and then add in the lines for the images itself. I used a slightly smaller thumbnail, removed the length resize because I'm using multiple images through a template, and I also took out the text in the popup as I want the visitor to be able to move the popup wherever they want.

<a class="thumbnail" href="#thumb">YOUR IMAGE URL

<span>YOUR IMAGE URL
</span></a>


<script type="text/javascript">
Drag.init(document.getElementById("book"));
</script>

On the 4th part I have the thumbnails to show up at 80 px wide and however long it works out to be. Put the path of the original image in the two YOUR IMAGE URL spots. I selected the img id to be called "books" because I'm displaying books.

I tried this on both IE6 & 7 but not yet Firefox. The popup, thumbnail, and ability to move the images can be seen at http://www.yesterdaysbookshop.com/testcss.htm


Credit goes to Luke and to Virgix. Of course, if this ends up not working in Firefox then I'm back to square one and javaville!