Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Remotely control a link's hover state?

Remotely control a link's hover state?
Thread Tools
megasad
Grizzled Veteran
Join Date: Oct 2002
Status: Offline
Reply With Quote
Jul 6, 2007, 10:33 AM
 
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.
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jul 6, 2007, 02:35 PM
 
we do something similar on our site with javascript.
     
Chuckit
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status: Offline
Reply With Quote
Jul 6, 2007, 03:20 PM
 
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.
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
     
megasad  (op)
Grizzled Veteran
Join Date: Oct 2002
Status: Offline
Reply With Quote
Jul 6, 2007, 05:01 PM
 
Originally Posted by andi*pandi View Post
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 View Post
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?
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
     
megasad  (op)
Grizzled Veteran
Join Date: Oct 2002
Status: Offline
Reply With Quote
Jul 6, 2007, 05:28 PM
 
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?
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jul 8, 2007, 06:33 PM
 
  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  (op)
Grizzled Veteran
Join Date: Oct 2002
Status: Offline
Reply With Quote
Jul 8, 2007, 07:46 PM
 
Originally Posted by Synotic View Post
  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.
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
     
megasad  (op)
Grizzled Veteran
Join Date: Oct 2002
Status: Offline
Reply With Quote
Jul 9, 2007, 09:55 AM
 
Originally Posted by megasad View Post
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.
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 04:57 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,