Results 1 to 5 of 5

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

  1. #1
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!
    Last edited by Bio; 08-13-2010 at 10:34 PM.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.
    Corrections to my coding/thoughts welcome.

  5. #5
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by Bio; 08-13-2010 at 10:30 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •