[MrD]

I have a page where it lists a directory of companies, their respective products and an image. This image needs to change as the user hovers over the name of a product. For example, the image currently there is a banana. When the user hovers over the word apple, the image of the banana changes to the picture of an apple.

Right now I'm having issues replacing the "src" attribute. Here is my code:

<a onMouseOver="$('.test').attr('src', 'submit.png');">Fabric Expansion Joints</a>

I do have jQuery linked (Tech Reps Inc. | Home) but even when I use flat Javascript to turn the div's bg black it doesn't work. So the root of the problem is, I'm not getting onMouseOver to work correctly.

Some of you will think that writing a function outside of the <div>s directly would be a good solution but I propose that it isn't, considering there will be like 7 companies and they each offer like 6 items each.

If someone knows of a straight CSS solution...I'd be shocked. To the best of my knowledge, CSS classes can only affect the elements they are in, so that #FabricExpansionJoints:hover{} will not affect img.product{} in the least.

Thanks for any and all help. I'm looking for a very simple, streamlined solution to this problem. I know there are jQuery galleries that draw on this idea, but they are most likely overly complicated. Again, thanks for all the help.

[MrD]

Seriously? Kill me. Ok, here's the deal. I only included jQuery in the other page I use it in (to cut back on overhead). Therefore, it was not included.

Close this thread, burn it, whatever. Now I have that song "even the best fall down sometimes" stuck in my head regarding my situation!

Edit: Unless, of course, someone can lead me to a solution that is CSS only...

[siasan]

I'm pretty sure you could use CSS mouseovers combined with absolute positioning. I've inadvertantly made something like that when I was doing my maths wrong to set up CSS vertical navigation.