How to make javascript image rollover activate css a:hover effect?

[BerlinIT]

What i need to do is have a css a:hover effect activated when another element's rollover effect on the page (an image with its own javascript rollover effect) is activated.

Its hard to explain, so a visual example can be seen at http://www.berlinit.com/maction/home.html (this is the working version with all images (its generated by fireworks so yes its very ugly code, but the required effect can be seen there)).

What i'm working on is making the links along the right into text links with css a:hover effects, which are triggered when the mouse rolls over the images in the middle (see http://www.berlinit.com/maction/test/home.html for a working example, with some css i've been trying (unsuccessfully) to implement).

I dont know how to do this one besides setting up the text links as images with their own javascript rollovers, and i'd prefer to have them as pure text links with css hover effect.

Any suggestions on how to go about getting this problem sorted would be massively appreciated.

Thanks in advance,
Greg

[Frank]

I have done something very much like this before.
First you need to give the images and the text that you want to change there own id

This way you can use some javascript like

document.getElementById('firstimage').className = 'colored_items';

this will allow you to change the stylesheet for a perticular id or ids using mouseover and mouseout

If your not in a rush I can have something for you on Monday

[theabyss]

Thanks for the warning on the bad code :D

Spacer GIFs and table, after table, after table, make me shudder. The second one definitley looks better both code wise and how the elements act together. It will be even better when it's complete :thumbsup:

[pardicity3]

The effect you are looking for is achievable, though it may take a little bit of nifty coding, but should come out very sexy in the end.

Have a look here for the basics of what you want to do:
http://www.meyerweb.com/eric/css/edge/popups/demo.html

[Frank]

Here you go I got the fist two started for you.

I think it's what you where looking for.

[BerlinIT]

Woohooo... you guys rock!

No really, I mean it. Thank you so much for that. The files you created for me look perfect Frank. Now i can use those instead of the yucky javascript code created by Fireworks for the entire site! yaaaaay.

I'll post the final url when i'm done.. hoping to finish it off tomorrow now.

Thanks again
Greg

[BerlinIT]

Hmmm.. having a bit of trouble working this out now guys... if I use Frank's example, do i have to position the elements using the stylesheet and absolute positioning?

Is it possible to use your example, but instead of using absolute positioning, just position the images in the table like I had it before?

<edit: 2 hours later:
Okay... so after much mucking about, I've managed to get the elements positioned using a mixture of static and relative positioning. All looks okay, until you move your mouse close to the elements, where there seems to be a large area of active rollover space. So the rollover is being activated even though the mouse is not over the actual element...

Why is this happening? how can i get rid of this invisible space? It seems the space is where the image would have been, before it was moved 52 pixels up using relative positioning of "top:-52". So the area where the image originated before being repositioned is still acting as a hot spot for the rollover.

Sheez this css is some tricky stuff.... hoping we can iron out these bugs soon.

[BerlinIT]

Damn... I'm starting to think that what i need to do here is impossible without absolute positioning. :(

If my thinking is correct, then i really only have 2 options:-

1. use absolute positioning, and have all the tables left aligned on the page... while this is uglier, it might be my only option.... maybe I should make the page load up in a forced 800x600 window. hmmmmm

2. use images instead of css, and just have all the links as gifs with rollovers. not my favourite option, but it'll do i guess.

What do u guys think is the best way to go? I'm all ears

thanks
Greg

[theabyss]

You have some problems with the stylesheet. I downloaded the example and I'm fixing it right now.

When I'm finished, I'll attach another ZIP with the files. :cool:

[theabyss]

OK. I'm done :cool:

The page validates towards the XHTML 1.0 Strict recommendation, that's a very good thing. The CSS also validates towards CSS2.

I've also made the CSS files more efficient by grouping somethings together. This will allow you to change multiple classes with just one line of text! You won't have to change each line now. :thumbsup:

If there's something else I can do, don't hesitate to post here. :)

[Frank]

Not sure why your using tables, position absolute will work. It just takes a little more effort to place the elements.

Here is the table that you where using except now it works.

Your still going to need to fix the table row height

[BerlinIT]

Originally posted by theabyss
OK. I'm done :cool:

The page validates towards the XHTML 1.0 Strict recommendation, that's a very good thing. The CSS also validates towards CSS2.

I've also made the CSS files more efficient by grouping somethings together. This will allow you to change multiple classes with just one line of text! You won't have to change each line now. :thumbsup:

If there's something else I can do, don't hesitate to post here. :)

Thanks Abyss, but unfortunately this is still the same problem - must be absolute positioning. The reason i want to be able to do relative positioning within the table is because the site is designed for 800x600 displays, and if a user with a higher screen res loads the site, i want it to be centered in his browser windows, not sitting on the top left of the window (very ugly).

Maybe i should just use absolute, and force the site to load in a 800x600 window. what do u guys think of this idea?

[theabyss]

I'm stumped. I tried doing text-align : center;, but that didn't work. I tried using left : 50% with absolute positioning and it made things centered, but all of the content was on stacked on each other. I'm not sure how to do this, but at least your code is better now. :cool:

[BerlinIT]

Yeah i Know... using relative css i can make it look good, but functionally its rooted.

honestly i dont think what i'm trying to do is possible.. i will need to decide between absolute positioning, and using gif images as the headers.

I think i'll go with gif headers for now. running out of time to keep mucking about on this. :(

Thanks for all of your help guys - i actually learned a fair bit out of this little exercise, and have a much firmerr grip on css now. :)

Cheers,
Greg