Rollover problem with text anchor
in [CSS]
|
Prev: Why does this look wrong in IE?
Next: height problem
From: Dave Rado on 15 Apr 2008 17:31 Hi If you look at my mock-up at http://tinyurl.com/5vbko5 , if you hover over the image, both the text and the image change colour, which is what I want to happen; but when you hover over the text, the text changes colour but the image doesn't, whereas I want both of them to. I know it's possible to do what I'm trying to do, because I've seen websites that do it, but I don't understand how they managed it. I'd be extremely grateful if someone could look at my code and let me know how I can modify it in order to achieve the above objective. Dave
From: John Hosking on 15 Apr 2008 18:23 Dave Rado wrote: > > If you look at my mock-up at http://tinyurl.com/5vbko5 , if you hover > over the image, both the text and the image change colour, which is > what I want to happen; but when you hover over the text, the text > changes colour but the image doesn't, whereas I want both of them to. If you say so. For me, the dark gray/darker gray arrow on a gray background makes it impossible for me (especially with such a teeny graphic) to detect any color change on the arrow image at all. So my first suggestion is to stop worrying about the color change, since no Earthling will detect its presence or absence. You are done. Huzzah! Possibly, however, you are interested in the principle. *Sigh* Well, you're mixing CSS and JavaScript. The CSS :hover pseudo-selector you are using encompasses the text and the image (but can change only the text color), whereas the JS you are using applies to only the image (and swaps out the image only, not affecting the text with its script). > I know it's possible to do what I'm trying to do, because I've seen > websites that do it, but I don't understand how they managed it. I'd > be extremely grateful if someone could look at my code and let me know > how I can modify it in order to achieve the above objective. The short answer is that I don't know, exactly. You'd need to either shift your onmouseover attributes over to the <a> element (possibly rewriting the image swapping code), or change the arrow from a foreground image to a BG image, which you can then affect with CSS rules. Try it and test it (as I haven't). BTW, you are using your "Footer" class in a somewhat strange way. You could perhaps change your selectors to be like ..Footer a:hover instead of a.Footer:hover and then get rid of the class="Footer" on the <a> element. Also: Delete <?xml version="1.0" encoding="iso-8859-1"?> from your code. And consider (haven't we said this before?) using a strict doctype for your HTML. HTH -- John Pondering the value of the UIP: http://improve-usenet.org/
From: Roderik on 15 Apr 2008 18:44 Dave Rado schreef: > Hi > > If you look at my mock-up at http://tinyurl.com/5vbko5 , if you hover > over the image, both the text and the image change colour, which is > what I want to happen; but when you hover over the text, the text > changes colour but the image doesn't, whereas I want both of them to. > I know it's possible to do what I'm trying to do, because I've seen > websites that do it, but I don't understand how they managed it. I'd > be extremely grateful if someone could look at my code and let me know > how I can modify it in order to achieve the above objective. Thats because you attached the event to the image, so it will happen when you hover the image. You can attach the event to <a> to make it happen whenever you are above the link (which includes the image). However this can be done with CSS only (background property) these days, so there is no need to complicate things with javascript. a {...} a:hover {...}
From: Dave Rado on 15 Apr 2008 19:16 On 15 Apr, 23:23, John Hosking <J...(a)DELETE.Hosking.name.INVALID> wrote: > Also: Delete <?xml version="1.0" encoding="iso-8859-1"?> from your code. > And consider (haven't we said this before?) using a strict doctype for > your HTML. > > HTH A lot of my pages wouldn't display correctly in IE6 if I did that. IE6 didn't implement the w3c rules properly and as a result it's even more buggy in strict mode than it is in quirks mode. And I sometimes have to use deprecated attributes for similar reasons. Dave
From: Dave Rado on 15 Apr 2008 19:20
Hi Roderik On 15 Apr, 23:44, Roderik <nos...(a)atall.nl> wrote: > However this can be done with CSS only (background property) these days, > so there is no need to complicate things with javascript. > > a {...} > > a:hover {...} The image's position is defined relative to the right hand edge of the text, and depending on the what fonts the user has installed and what browser and OS the are using, that position would vary; how can one give text a background image that is 3px to the right of that text? Dave |