Comments on: creating popup image viewer in css

By: sonal

sonal — Thu, 17 Jul 2008 09:43:37 +0000

Do you know how to create a popup window using only css without using javascript?

By: han

han — Fri, 27 Jun 2008 07:21:36 +0000

Awesome script.

It works fine on a single html file, but it will not work if you put the CSS code in a separate file, say stylesheet.css, and link it from your html file. Any ideas?

Another question, how effecient is this script? Are ALL the pics in the SPAN code loaded everytime the page is called? What if you just want to load the images you hover only?

By: matt

matt — Wed, 25 Jun 2008 03:28:22 +0000

great script! I’m actually using it for a comic book site so your spider-man demo was great!

I notice the positioning in firefox is different than IE with the pop up window. Any ideas?

http://www.bringbackwendell.com/popup.html

By: Natbob

Natbob — Wed, 26 Mar 2008 20:37:45 +0000

This is a good script. I found this script while trying to find a replacement for a script that is currently on my site, it does the same thing. In the process of testing that script, I found that if you want the image to be a link it doesn’t work in IE. However it does work if you click on the padding (the span tag) around the image. It works fine in FF but for some reason the img tag voids the link. I have tried making a link inside of a link, however browsers don’t like that too much. If anyone has a solution that would be great!

By: Kelly

Kelly — Sat, 23 Feb 2008 05:02:39 +0000

Ok – I figured it out – did a little google search for “css hover fix ie6″ and found a guy with a solution. You add a little code to the css (you can search csshover.htc) to find him – sorry I didn’t save it!

By: Jonathan

Jonathan — Fri, 22 Feb 2008 16:22:08 +0000

thank you guys, been looking for this all over the net. Am an amateur advance photographer and a complete newbie to css and javascript. Learning to build personal website to put up video and photos for family and friends to view. Please keep up the good work.
-Jonathan

By: Kelly

Kelly — Thu, 21 Feb 2008 21:11:04 +0000

I have implemented this on my site – it works great except for in Explorer. In Explorer, the images don’t switch out. I do not have a link on my items as the example shows – they are only meant to show images, not take the viewer anywhere on the click. Is this why? Does anyone know a work-around for this glitch? Thanks!

By: santosh setty

santosh setty — Fri, 08 Feb 2008 15:05:57 +0000

hi annie,
can u show me demo file.. so that i can help you

By: Annie

Annie — Fri, 08 Feb 2008 15:03:06 +0000

I did a pop-up of an image when the mouse hovers over text, but the enlarged image is pushing all other text out of the way even though I set the z-index of the image higher than the one of the text. Please help!

By: Potski

Potski — Mon, 04 Feb 2008 00:01:24 +0000

Great script, really useful and just what I was looking for. Thank you!

By: santosh setty

santosh setty — Sat, 08 Dec 2007 04:54:35 +0000

hi Yeuclid,
can u plz provide me link so that i can help u!

By: Yeuclid

Yeuclid — Fri, 07 Dec 2007 17:22:22 +0000

Neat code, but doesn’t work for me in IE6.

Any suggestions?

Works in Firefox

By: Vaninja

Vaninja — Mon, 26 Nov 2007 07:18:19 +0000

Wow! This is what i looking for. Cool!!
I was visiting ebay’s “snapshot view” before and wondering how they made it (I’m a newbie in webdesign).
This code is really useful.
Thanks!!

By: Brian In NY

Brian In NY — Wed, 07 Nov 2007 20:53:43 +0000

.. I have now downloaded all the code via the utility provided, and it works fine. Thanks!

By: Brian In NY

Brian In NY — Wed, 07 Nov 2007 20:37:39 +0000

CORRECTION OF ABOVE POST . .

I discovered the cut-and-pasted code somehow ended up with quote marks that weren’t understood. The small picture now show, with no enlargement with the roll-over. I will be looking further.

By: Brian In NY

Brian In NY — Wed, 07 Nov 2007 20:13:49 +0000

Hi,

I have tried this, downloading and inserting your code, both html and css.

I have modified the directory references to point to my own PIC folder, in which I have placed your two Spiderman images (small and big), and yet the images fail to appear in execution.

This is discouraging.

By: Ian

Ian — Fri, 05 Oct 2007 17:15:52 +0000

Hi – I am just learning Dreamweaver and want to do exactly what you are doing when you hover over the words here & demo in your intro. That is to say you get a snapshot open with a pointer to the word you hover over.

Can someone please explain how I can achieve this effect.

Thanks very much.

By: santosh setty

santosh setty — Wed, 19 Sep 2007 14:51:59 +0000

Hi Bob,
Can u explain more clearly bcoz i didnt get wht u want?

By: Bob Cobb

Bob Cobb — Wed, 19 Sep 2007 04:22:22 +0000

Is there a way to make it so that when the mouse leaves the thumbnail, the pop-up image disappears even if the mouse is over the popped-up image?

I know how to make this less likely by moving the pop-up image farther away from the thumbnail, but I was wondering if there’s a way to make it so that even if the mouse is over the pop-up image, it disappears no matter what when the mouse leaves the popped-up image?

If you don’t know what I mean, you can test this by moving the mouse fast to test this.

Thanks SO MUCH for your help! I’m designing a site right now, so any fast answer you can give will be very much appreciated.

By: santosh setty

santosh setty — Sun, 09 Sep 2007 15:08:48 +0000

Hi Raye,
Up to my knowledge it is not possible to create pop-up window using only css we need to use javascript.