SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 47
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery Image and Hover-Over-Popups

    I have a project that needs the following:

    The web page is in full color with several objects on it. When someone hovers over one object, not only does that object stay in full color, but all other objects on the page gray-out. Also, while that object is 'highlighted' in it's color state, a pop up box with information regarding the product pops up.

    When the mouse is moved from that object, the objects on the page are in full-color and when the mouse moves to another object, again, just the one object is in a full-color-state while the others are greyed-out with a pop up box of information.

    I was recommended to use something like this:
    jQuery Image Effects - Hover Effect w/ jQuery & CSS - jQuery Tutorial | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka

    and this:
    Your own Hover-Over-Popups, CSS/XHTML-friendly - Nic Honing

    but am clueless as to how I could implement two objects at once. Flash is out of the question, thus the recommendation to use something like this.

    Any advice on how these could be implemented?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That should be pretty easy with jquery or something like the lightbox examples but you'll have to wait for a js guru to pop by as I'd probably do it wrong. You could probably just do it with swapping classes on hover and then revealing and hiding the elements as required. (e.g. add a new class to the parent on hover that dims all the other controls but over-ride it for the currently hovered element. The popup content could be revealed on hover also.)

    Here's a simpler css version that works in IE7 and upwards but won't work in ie6 without a helper script.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    ul.popup {
        width:50%;
        border:1px solid #000;
        position:relative;
        margin:0 auto;
        padding:0 0 100px;
        list-style:none;
    }
    ul.popup li {
        display:inline-block;
        margin:10px;
        vertical-align:top;
    }
    * html ul.popup li {
        display:inline
    }
    *+html ul.popup li {
        display:inline
    }
    .item {
        width:150px;
        height:150px;
        border:1px solid #000;
        background:red
    }
    .info {
        position:absolute;
        left:-999em;
        background:yellow;
        padding:10px;
        margin:-25px 0 0 10px;
        border:1px solid #000;
        width:130px;
    }
    .popup li:hover .item, .popup li:hover .info {
        position:relative;
        z-index:100
    }
    .popup li:hover .info {
        left:auto;
        position:absolute
    }
    .overlay {
        display:none;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:1;
        background:#fff;
        opacity:0.7;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .popup li:hover .overlay {
        display:block;
    }
    .popup li:hover .overlay:hover {
        display:none
    }
    </style>
    </head>
    <body>
    <ul class="popup">
        <li>
            <div class="item">Test1</div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text lortem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
            <div class="overlay"></div>
        </li>
    </ul>
    </body>
    </html>
    It would be neater in javascript with delays and fades added etc.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    That poses as a challenge because it needs to be IE6 compatible (ugh).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's a simpler version that works without the extra overlay div. I've also added a rough helper script for IE6 so it should work though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>One on and rest off</title>
    <!--[if lt IE 7]>
    <script type="text/javascript">
    multiList = function (){
        var sfEl = document.getElementById('popup');
            sfEl.onmouseover=function() {
                this.className+=" over";
            }
            sfEl.onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        var sfEls2 = document.getElementById('popup').getElementsByTagName("LI");
            sfHover(sfEls2); 
    }
    
    sfHover = function(sfEls) {
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", multiList);
    
    </script>
    <![endif]-->
    <style type="text/css">
    p {
        margin:0
    }
    ul.popup {
        width:524px;
        border:1px solid #000;
        position:relative;
        margin:0 auto;
        padding:0;
        list-style:none;
    }
    ul.popup li {
        display:inline-block;
        border:10px solid #fff;
        vertical-align:top;
    }
    * html ul.popup li {
        display:inline
    }
    *+html ul.popup li {
        display:inline
    }
    .item {
        width:150px;
        height:150px;
        border:1px solid #000;
        background:red
    }
    .info {
        position:absolute;
        left:-999em;
        background:yellow;
        padding:10px;
        margin:-25px 0 0 10px;
        border:1px solid #000;
        width:130px;
    }
    .popup li:hover .item, 
    .popup li:hover .info,
    .popup li.over .item, 
    .popup li.over .info {
        position:relative;
        z-index:100
    }
    .popup li:hover .info,
    .popup li.over .info {
        left:auto;
        position:absolute
    }
    
    .popup:hover li,
    .popup.over li{
        opacity:0.2;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    }
    .popup:hover li:hover,
    .popup.over li.over{
        opacity:1.0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    }
    
    </style>
    </head>
    <body>
    <ul id="popup" class="popup">
        <li>
            <div class="item">Test1</div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text lortem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
    </ul>
    </body>
    </html>

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sweet! I'll see if I can modify this with my code.

  6. #6
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How would I be able to adapt a timer for the transition? Apparently a transition (like a fade) is needed between images.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    In my code above you could use css3 for modern browsers (not IE).

    Like this
    :
    Code:
    ul.popup li {
        display:inline-block;
        border:10px solid #fff;
        vertical-align:top;
          -webkit-transition: opacity 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: opacity 1s ease;
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You'll need one of the JS gurus to chip in here and fix the timing issues but something along these lines should work with jquery.

  9. #9
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your hard work Paul O'B.

    I hope someone will chime in because I need this script to work with IE6.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The last example was working in IE6 with the jquery I added.

    This one is better timed.

  11. #11
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul O'B.

    I tried your last suggestion using IETester's IE6 browser and the transition didn't work. I've attached a screenshot.

    It does work in FF & Safari, though I still need to get it working for IE6.

    It's frustrating.
    Attached Images Attached Images

  12. #12
    SitePoint Member mr.interwebs's Avatar
    Join Date
    May 2011
    Location
    Omaha
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you just want to fade the other elements to a certain opacity or do you literally want to "gray them out." It sounds like you want a true "modal window" effect, only without the window. I would suggest stealing the transparent overlay portion of the code from the "facebox" plugin, and simply setting the z-index of the element you are hovering, to a higher value than that of the overlay. If you google "facebox" you'll understand what I mean. If you are more specific as to what you really need, I think I could help in more detail.

  13. #13
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, mr.interwebs. I could use all the help I can get.

    If you take a look at this site, this one page (the images) needs to be converted to html AND it must be IE6 compatible.

    I've seen many scripts, including Paul O'Bs, that are jQuery based, CSS-based, and even other JavaScript forms. Unfortunately, I cannot find any that are compatible with IE6 that would include a transition.

    Currently the way the site is set up, it's Flash-based. There are separate images for each hovered item. Meaning, the current-state image is one whole image that contains all of the objects and the hovered-state image is another image with all of the objects faded with the exception of the hovered-object; so on and so forth. If I simply created an ImageMap with area coordinates, then the only problem would be just creating the transition. Downside: large images files for the browser to load.

    I've seen recommendations from other developers. One even advising me to create slices of each object (including the faded ones for hovered-state), create them to be transparent, add the PNG transparent hover fix for IE6 to all items, then put all of those objects in their own divs layering them accordingly, position them, create an Image Map, then apply two different style sheets for the hover/transition: one in CSS for FF, Safari, and IE7, 8, 9 then a separate one for IE6 for IE6's own transition JavaScript affect (which I have yet to see one working in IE6 with my IETester 6 browser).

    I'm not sure that this would be a good use of time to put THAT much work to make a transitional affect to be compatible with IE6. But I could be wrong.

    I hope I explained it better. I appreciate your input!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    Thanks, Paul O'B.

    I tried your last suggestion using IETester's IE6 browser and the transition didn't work. I've attached a screenshot.

    It does work in FF & Safari, though I still need to get it working for IE6.

    It's frustrating.
    Then there must be something wrong as its working fine for me in IE6 (see screenshot) .

    Have you upgraded your ietester and do you have js turned on.
    Attached Images Attached Images

  15. #15
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You may be right and yes, I have the latest IETester and JS is turned on. I uninstalled and reinstalled. (sigh).

  16. #16
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Quote Originally Posted by Paul O'B View Post
    Have you upgraded your ietester and do you have js turned on.
    I uninstalled IE9 from my system and uninstalled IETester (based upon IETester's forum), restarted my system, reinstalled IETester, checked to make sure I was in Admin mode with JavaScript on and I still can't duplicate your screenshot.

    Just another mountain to climb! I would really like to use your method, but I can't see it working in order to get it to work on the project I'm working on. (sigh).

    At any rate, in my case, I would have to create a transparent image for each object, create the divs, and then modify the css for this effect to work. Am I presuming correctly?

  17. #17
    SitePoint Member mr.interwebs's Avatar
    Join Date
    May 2011
    Location
    Omaha
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toad78 View Post
    Thanks, mr.interwebs. I could use all the help I can get.

    If you take a look at this site, this one page (the images) needs to be converted to html AND it must be IE6 compatible.

    I've seen many scripts, including Paul O'Bs, that are jQuery based, CSS-based, and even other JavaScript forms. Unfortunately, I cannot find any that are compatible with IE6 that would include a transition.

    Currently the way the site is set up, it's Flash-based. There are separate images for each hovered item. Meaning, the current-state image is one whole image that contains all of the objects and the hovered-state image is another image with all of the objects faded with the exception of the hovered-object; so on and so forth. If I simply created an ImageMap with area coordinates, then the only problem would be just creating the transition. Downside: large images files for the browser to load.

    I've seen recommendations from other developers. One even advising me to create slices of each object (including the faded ones for hovered-state), create them to be transparent, add the PNG transparent hover fix for IE6 to all items, then put all of those objects in their own divs layering them accordingly, position them, create an Image Map, then apply two different style sheets for the hover/transition: one in CSS for FF, Safari, and IE7, 8, 9 then a separate one for IE6 for IE6's own transition JavaScript affect (which I have yet to see one working in IE6 with my IETester 6 browser).

    I'm not sure that this would be a good use of time to put THAT much work to make a transitional affect to be compatible with IE6. But I could be wrong.

    I hope I explained it better. I appreciate your input!
    I think I have found a jQuery plugin that does exactly what you need. I'm not near a computer that can test it in IE6, but I wanted to post it before I forgot.

    jQuery TOOLS / Expose - Make your HTML elements stand out

    If there are problems with it in IE6, let me know. I can modify the plugin to work with IE6 and throw it up on github for you to download.

    Hope this helps,

    -Scott

  18. #18
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Your killing this noob, mr. interwebs, but I'll take a look at this and get back to you.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    I uninstalled IE9 from my system and uninstalled IETester (based upon IETester's forum), restarted my system, reinstalled IETester, checked to make sure I was in Admin mode with JavaScript on and I still can't duplicate your screenshot.

    Just another mountain to climb! I would really like to use your method, but I can't see it working in order to get it to work on the project I'm working on. (sigh).
    It sounds like its your version of ietester combined with some installations of IE9 which prevent the transparency from working.

    Have you tried looking at any other pages that have png images and see if they work?

    I know my example is working in IE6 and my iestester is working fine as I keep it one a separate machine from Ie9 and I've used it hundreds of times a day for many years .

    That expose example from Scott looks pretty good also.

  20. #20
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, even after I tested IETester after uninstallation of IE9 and IETester, reboot, and reinstallation of IETester, I still can't see transparent images. But I'll give your example and try and yes, I plan on looking into Scott's example. It looks promising.

    Thank you!

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    Yeah, even after I tested IETester after uninstallation of IE9 and IETester, reboot, and reinstallation of IETester, I still can't see transparent images.
    Then at least now you know that it's only you and not everyone else

  22. #22
    SitePoint Member mr.interwebs's Avatar
    Join Date
    May 2011
    Location
    Omaha
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's another example of what you need: Using Opacity to Show Focus with jQuery Example

    Also, I have tested both of the links I provided, and they both work perfectly in IE6.

    -Scott

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mr.interwebs View Post
    Ok, here's another example of what you need: Using Opacity to Show Focus with jQuery Example

    Also, I have tested both of the links I provided, and they both work perfectly in IE6.

    -Scott
    That's very similar to the routine that I used in my example above

  24. #24
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I installed IETester on Win97 machine and it seems to work fine (not in admin mode). I'm wondering if it's Windows 7 on my machine.

  25. #25
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's very similar to the routine that I used in my example above
    Very similar. But how does an idiot like me implement it? <


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
  •