[megasad]

On the front page of my website I currently have the centre picture changing when you move the mouse over it.

What I would like to do is, when you move the mouse over said picture, the "comics" text in the bottom right corner should change to the hover state, which is to say white text on a black background.

I've tried accessing it through javascript and through CSS but cannot work out how to make it go, and the only thing vaguely resembling it that I found on Google used a hideously convoluted javascript that I could neither wrap my head around nor actually get working.

If anyone know how to do this, please let me know.

[andi*pandi]

we do something similar on our site with javascript.

[Chuckit]

You can't trigger a hover state without hovering over that thing, as far as I know. You can use a ridiculously convoluted selector to make one object's hover state change the attributes of another object, but Javascript is actually simpler.

[megasad]

Originally Posted by andi*pandi 

we do something similar on our site with javascript.

I looked in your profile but cannot find any websites. You can link me up?

Originally Posted by Chuckit 

You can't trigger a hover state without hovering over that thing, as far as I know. You can use a ridiculously convoluted selector to make one object's hover state change the attributes of another object, but Javascript is actually simpler.

In which case javascript is fine. I know a little, but as I say, have not been able to work this out. The "comics" text link doesn't currently have an ID or a name, but once one is added, what would I need to add to the onfocus+onmouseover and onblur+onmouseout events associated with the link wrapped 'round the picture?

[megasad]

Originally Posted by andi*pandi

I didn't code this site, so I can't take responsibility for how well/bad it is... but if you can scrape some code out of it, feel free.

Ah, I see, do you mean how if I move the mouse over the options on the left, a description appears in red text above the content section Alas, that is being done using images, which I already know how to make behave in this manner.

I tried applying what I knew about this to text by simply having the javascript change the id of the link. That didn't work, so then I tried having it change some inline CSS but that didn't work either.

Which is why I am now stuck. Anyone knows how to make it go?

[Synotic]

1. Modify your CSS to accomodate a 'hover' class: a:hover, a:active, a:focus,a.hover
2. Add an id of 'comics' to your comics link.
3. In the mouseover/focus of the badge, add the line: document.getElementById('comics').className='hover ';
4. Similarly for your mouseout/blur, add: document.getElementById('comics').classname='';

Works over here... Give it a shot.

[megasad]

Originally Posted by Synotic 

1. Modify your CSS to accomodate a 'hover' class: a:hover, a:active, a:focus,a.hover
2. Add an id of 'comics' to your comics link.
3. In the mouseover/focus of the badge, add the line: document.getElementById('comics').className='hover ';
4. Similarly for your mouseout/blur, add: document.getElementById('comics').classname='';

Works over here... Give it a shot.

Mm-hmm! Works likes a charm, thank you very much. It's what I was imagining I needed to do, but I did not know the "document.getElementById" part and that was why I was stuck.

Also, I found I simply needed to add "a.comics" (I called the class "comics"), not for any of the rest of the link states (active, hover etc.), and that works in all the Mac browsers. I'll try it in Windows tomorrow, but it makes sense that it is all that is needed, so unless it doesn't work in IE for some reason, that is what I will stick with.

Thank you again, this shall prove useful for many sites to come.

[megasad]

Originally Posted by megasad 

Also, I found I simply needed to add "a.comics" (I called the class "comics"), not for any of the rest of the link states (active, hover etc.), and that works in all the Mac browsers. I'll try it in Windows tomorrow, but it makes sense that it is all that is needed, so unless it doesn't work in IE for some reason, that is what I will stick with.

Just a brief follow-up; for it to work in Internet Explorer, both version 7 for Windows and the ancient Mac version, I needed to make a couple of additions:

1 - Added a class name to the big picture link so that I could tell it to use the badge background behind the comic image when you moved the mouse over the central image area. I needed to do this as all links were defined as having a background colour of black upon hover/active/focus and this over-rode the background image behind the transparent PNG I'm using. Basically, IE just needed explicit telling to use the background image rather than the solid colour.

2 - As well as the "comics" link background and text colour changing, I needed to tell it to change the visited link colours too. Hover/active/focus aren't required as these cannot be used whilst the image has the focus anyway.

Anyway, it works naice now. Hoo-hah.