jQuery Image and Hover-Over-Popups

**toad78** · Apr 18, 2011 12:12

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?

**Paul O'B** · Apr 19, 2011 02:39

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.

**toad78** · Apr 21, 2011 13:06

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

**Paul O'B** · Apr 22, 2011 03:43

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>

**toad78** · Apr 22, 2011 13:54

Sweet! I'll see if I can modify this with my code.

**toad78** · Apr 25, 2011 15:54

How would I be able to adapt a timer for the transition? Apparently a transition (like a fade) is needed between images.

**Paul O'B** · Apr 26, 2011 01:26

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;
}

**Paul O'B** · Apr 26, 2011 01:50

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.

**toad78** · Apr 27, 2011 15:17

Thanks for your hard work Paul O'B.

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

**Paul O'B** · Apr 28, 2011 00:55

The last example was working in IE6 with the jquery I added.

This one is better timed.

**toad78** · May 2, 2011 15:16

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.

**mr.interwebs** · May 2, 2011 19:50

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.

**toad78** · May 2, 2011 21:11

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!

**Paul O'B** · May 3, 2011 01:34

Originally Posted by toad78

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.

**toad78** · May 3, 2011 05:14

You may be right and yes, I have the latest IETester and JS is turned on. I uninstalled and reinstalled. (sigh).

**toad78** · May 3, 2011 06:02

Originally Posted by Paul O'B

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?

**mr.interwebs** · May 3, 2011 06:17

Originally Posted by toad78

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

**toad78** · May 3, 2011 06:20

Your killing this noob, mr. interwebs, but I'll take a look at this and get back to you.

**Paul O'B** · May 3, 2011 06:39

Originally Posted by toad78

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.

**toad78** · May 3, 2011 06:42

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!

**Paul O'B** · May 3, 2011 06:52

Originally Posted by toad78

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

**mr.interwebs** · May 3, 2011 08:12

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

**Paul O'B** · May 3, 2011 11:38

Originally Posted by mr.interwebs

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

**toad78** · May 3, 2011 13:01

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.

**toad78** · May 3, 2011 13:56

Originally Posted by Paul O'B

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? <

User Tag List

Thread: jQuery Image and Hover-Over-Popups

Thread Tools

Display

jQuery Image and Hover-Over-Popups

Bookmarks

Bookmarks

Posting Permissions