jQuery Image and Hover-Over-Popups

JavaScript
41

Thanks guys.

In IE6,7 & 8 (at least on my browser tester --IETester-- I do not see the fade transition effect) when I hover over the linked objects. FF & Safari are fine.

If you hover over any object, except Green Source, you will notice that Green Source is the only one that fades (I removed the link on Green Source to show you the problem I’m having). All linked objects should fade except for the one being hovered over. I noticed this started happening after I set <a href=“#”> to all of the objects. IE6,7,8 stopped transitioning after I set links to the objects.

The example I’m trying to achieve is on this page.

42

I think the problem is that you have absolutely positioned the image and then you wrapped an anchor around the image and IE is leaving the anchor where it was in the flow and not around the image.

Move the ids to the anchors instead.


<div class="fade-area-1" id="excepts"> 
        <a [B]id="eightwatt"[/B] href="#"><img  src="http://www.bkssl.com/images/8WATT-BKSSL.png" width="371" height="322" alt="8WATT-BKSSL" title="8WATT-BKSSL" border="0" /></a> 
        <a id="indooroutdoor" href="#"><img src="http://www.bkssl.com/images/Indoor-Outdoor-Stepdown-LIg.png" width="292" height="270" alt="Indoor-Outdoor Stepdown Lighting" title="Indoor-Outdoor Stepdown Lighting" border="0" /></a> 
        <a id="threewatt" href="#"><img src="http://www.bkssl.com/images/3WATT-BKSSL.png" width="304" height="260" alt="3WATT-BKSSL" title="3WATT-BKSSL" border="0" /></a> 
        <a id="twotwowatt" href="#"><img src="http://www.bkssl.com/images/225-8WATT-BKSSL.png" width="356" height="318" alt="2.25 8WATT-BKSSL" title="2.25 8WATT-BKSSL" border="0" /></a> 
        <a  id="onewattthreewatt" href="#"><img src="http://www.bkssl.com/images/1WATT-3WATT-BKSSL.png" width="195" height="187" alt="1WATT 3WATT BKSSL" title="1WATT 3WATT BKSSL" border="0" /></a> 
        <a id="lmsevennine" href="#"><img src="http://www.bkssl.com/images/LM-70--LM-80.png" width="172" height="187" alt="LM-79 LM-80" title="LM-79 LM-80" border="0" /></a> 
        <a id="whatisbkssl" href="#"><img  src="http://www.bkssl.com/images/WhatIsBKSSL.png" width="173" height="255" alt="What Is BKSSL?" title="What Is BKSSL?" border="0" /></a> 
        <a  id="rohs" href="#"><img src="http://www.bkssl.com/images/rohs.png" width="158" height="52" alt="RoHS" title="RoHS" border="0" /></a> 
        <a id="warranty" href="#"><img  src="http://www.bkssl.com/images/warranty.png" width="93" height="57" alt="5-Year Warranty" title="5-Year Warranty" border="0" /></a> 
        <img id="greensource" src="http://www.bkssl.com/images/greensource.png" width="193" height="71" alt="Greensource Initiative" title="Greensource Initiative" border="0" /> </div>
    </div>

A list structure would have been better for that code rather than bare anchors next to each other.

43

Thank you, Paul O’B:

Your solution seemed to have solved THAT problem. Now I guess I’ll be moving forward to figuring out tooltips. :slight_smile:

44

Paul O’B: I’ve been able to make some progress using Spry (JavaScript) here. My issue now is how can I keep the tooltip from moving. I have it absolutely positioned, but it still won’t stay put so the mouse can be hovered over it to be clicked on as a link. :slight_smile:

45

If you are using the spry tooltip then I believe this article has the answers to your question about stopping the mouse move and keeping the tooltip alive whilst you click it.

46

Can this be made for an image.I mean when you hover over an image to display another popup of another image?
Thanks in advance.

47

Hi (–eRRoR–),

Welcome to Sitepoint :slight_smile:

As this thread is a year old please start a new thread with your own query and give full details of exactly what you need and you will get more relevant advice. You can link to this thread if it is relevant but would be better of starting afresh with a clear description of what you are after.

Thanks.

Thread Closed