Then at least now you know that it’s only you and not everyone else 
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
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.
Very similar. But how does an idiot like me implement it? <:)
I just found out something else with the site. The content inside the box needs to be dynamic. How can I accomplish this? I know how to build dynamic sites but with this hover IE6, transparency compatibility, would jQuery work in this case? Or is this one of those projects that cannot be accomplished for IE6?
It’s similar to mine but the html in that one is rubbish and non semantic.
However all you need to do is group your images within an area (or 2 areas if you need).
<div class="fade-area-1" id="excepts">
<img src="img1.jpg" alt="imgname" width="100" height="100" />
<img src="img2.jpg" alt="" width="100" height="100" />
<img src="img3.jpg" alt="" width="100" height="100" />
<img src="img4.jpg" alt="" width="100" height="100" />
<img src="img5.jpg" alt="" width="100" height="100" />
<img src="img6.jpg" alt="" width="100" height="100" />
</div>
<script type="text/javascript" src="[jquery-1.3.2.js](http://www.sitepoint.com/forums/view-source:http://davidwalsh.name/dw-content/jquery-1.3.2.js)"></script> <script type="text/javascript"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); }); </script>
However it doesn’t have the pop up message that you wanted which I built in to my example. My example works much the same as that so just play around with it until you get familiar with what’s happening.
So somewhere in there I have to add a div box so the dynamic content can be added to it.
Well, I’ve managed to get my IETester working and able to see transparencies once again with 6. Also, I’ve been able to implement the jQuery hover script here y’all have so patiently helped me with. IE6 (at least in my tester) seems to have a 2-3 second delay. Not sure if it’s my browser or the code.
Plus, I noticed within the code that there was fade-area-1 and a fade-area-2. Can someone give me a clue what these do? I like to understand it more.
On top of this, I’ve been requested to add a ‘Tooltip’ popup when the image is hovered over containing dynamic data. Not sure where to begin finding something that is compatible with the way I have this set up, but I guess I’ll need to experiment some more.
I gave you a basic tooltip popup in my example. If you want to load dynamic content with ajax perhaps then there are some examples about. Again its just a matter of finding something that suits your particular setup.
Hey Paul O’B:
I turned the images into links but it seems to flash/blink in FF and Safari, and IE6 has lost its transition. How would I fix this?
My first thought would be to set the anchor to display:block and see if that makes a difference otherwise it’s proabbly a js issue.
.fade-area-1 a, .fade-area-1 a:link {
border: 0 none;
[B]display: block;[/B]
}
That helped with FF, but IE6 is still uncooperative.
Okay. Looks like I’m back to square one again.
Paul O’B:
Well, since I’ve hit a brick wall with the jQuery, I’m going to try your CSS/JS that you posted in #10 and try to adapt it with the setup I currently have. I was really hoping the jQuery would’ve worked out, if I understood it more.
Your page was working in ie6 I believe so it must be something you added since. You may need to backtrack and remove the last things you added and get it working and then you can narrow down what was causing the problem.
I added <a href=“#”>…</a> to all of the objects. I tested it and that is what’s the difference. IE 6,7, & 8 stop all transitioning once I added the <a href=“#”> and FF & Safari flash when hovered.
Not sure how I can fix something I don’t understand.
Post a link to a sample test page that demonstrates the problem (there a tons of free hosting sites out there) or even use something like jsFiddle - and we can help you to get your head around the problem.
Hello and thank you, paul_wilkins:
You can find it here. I have Greensource set with an <a href=“#”> so you can see the effect I was talking about.
That page seems to be working in IE6 - 8 for me.
(I’m sure Paul W can help with the JS problems though.)
I’m having trouble finding a problem in recent versions of browsers. Can further guidance be provided towards experiencing the issue?