Fixed location for all Popup images when using the DD CSS Popup Image Viewer

[Bio]

Hello, everyone. I'm new to coding and I'm working on a website for my final project. I decided to do an online portfolio, so that's how I stumbled on using this code.

(EDITTED: Original question was about clicking instead of hovering. New question is about moving fixed location for Popup images)

How do you make all of the large images (each one that displays from a hover over a thumbnail) show up in the exact same spot? The code provided as it is displays the image relative to the position of the thumbnail. Thus, multiple thumnails will have the large image display in slightly different locations. I'm trying to eliminate that and have a fixed location. And I want to do this without having to duplicate the code in my style sheet and manipulate the values for each one so that the large images move to the same spot (I tried this and I ran into problems when checking different browsers).

Thanks in advance!

[djr33]

Javascript can handle events like hover, clicking, the release of the button, a double click... etc.

CSS doesn't do any of this. The only exception is a "pseudo-class" called hover that doesn't work in all browsers-- actually, all except internet explorer. In internet explorer, 'hover' only works on links (<a> tags) and this is perhaps the original intent of it: to change the color/styling of a link when the mouse hovers on it.

Therefore, you can use this to create hovering changes but nothing else, and even that isn't entirely reliable.

For your needs, Javascript is definitely the right answer. Remember that Javascript can be disabled or incompatible in older browsers, so it won't always work. When learning how to do this, obviously that is irrelevant but if you plan to release sites with Javascript it is important to know this so that you have an alternative available to users who can't access your Javascript content.

[Bio]

I also noticed if I use a larger image, it has trouble showing up on the page when the hover is activated. Is this a size problem?

[bluewalrus]

Actually IE 7 and 8 support the hover and ie6 supports the hover on links (<a) only.

http://www.quirksmode.org/css/contents.html

How are you coding the display of the larger image? Could be a few things depending on the page setup.

[Bio]

Yeah, I figured out the image problem. I had a syntax error with the image source. =(

Anyway, I decided to not use clicking, so I have a new question now that I'm farther along:

How do you make all of the large images (each one that displays from a hover over a thumbnail) show up in the exact same spot? The code provided as it is displays the image relative to the position of the thumbnail. Thus, multiple thumnails will have the large image display in slightly different locations. I'm trying to eliminate that and have a fixed location. And I want to do this without having to duplicate the code in my style sheet and manipulate the values for each one so that the large images move to the same spot (I tried this and I ran into problems when checking different browsers).

Thanks in advance!