Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Paul,
on Wednesday, January 4, 2006 at 17:35 wsg@webstandardsgroup.org wrote:
You can't use the :hover pseudo class on any element other than an
anchor in IE unfortunately. I don't have time to look too far, but
with a brief search I found this link that mentions it:
http://4umi.com/web/css/hover.htm
Yes, you're right! You have to use a behavior, expression or some
other javascript solution to make :hover work on other elements than a
in ie 7, but if you take a closer look at the css I sent, you'll see
that you don't need a :hover on the span to change the background. The
:hover is set on the a(!):
a#header:hover span {
background: url(another url) no-repeat (or shift);
}
(it could be that you have to change the background of the a tag too,
but if I recall it right, it sometimes solves the :focus, which
doesn't work well at all).
I use this quite often and it works.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Martin,
That works on every site I need to test on, can't
believe the solution is that easy!!
Tested on PC:
IE6, IE5.5, IE5.0, Opera 7, Netscape
6.
Tested on Mac:
IE5.2, Safari, Firefox
Can't thank you enough for that solution, really
appreciate it.
Now I have to go and overhaul all my rollover
graphics!
Paul
- Original Message -
From:
Martin
Heiden
To: Paul Collins
Sent: Wednesday, January 04, 2006 4:07
PM
Subject: Re: [WSG] Images as DIV
Background with and without link (w3c friendly)
Paul,on Wednesday, January 4, 2006 at 15:48 wsg@webstandardsgroup.org
wrote: I thought the Gilder/Levin/Shea Enhancement Method was
best, but you can't have a hover state on a graphic link using
this. Example HTML would be: a id="header"
title="Revised Image Replacement"
href=""span/spanRevised Image
Replacement/aWhy?a#header:hover span {
background: url(another url) no-repeat (or shift);}should
work.regards
Martin**The
discussion list for http://webstandardsgroup.org/See
http://webstandardsgroup.org/mail/guidelines.cfmfor
some hints on posting to the list getting
help**
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Hi Fausto, A good way of doing it, but It doesn't work with Images off and CSS still turned on, which becomes an Accessibility issue. Has anyone ever resolved a way ofdoing this for graphic links containing a rollover state? The problem is, IE doesn't let you add a hover state to anything other than the a tag. So thecommon methods of image replacement don't seem to work in those instances: I thought the Gilder/Levin/Shea Enhancement Method was best, but you can't have a hover state on a graphic link using this. Example HTMLwould be: a id="header" title="Revised Image Replacement" href=""span/spanRevised Image Replacement/a Anyonefoundanother method? For a good list of ideas Fausto, you could try this page if you haven't already seen it: http://www.mezzoblue.com/tests/revised-image-replacement/ Cheers,Paul - Original Message - From: Fausto Balloni To: wsg@webstandardsgroup.org Sent: Wednesday, January 04, 2006 2:16 PM Subject: [WSG] Images as DIV Background with and without link (w3c friendly) Hi All,We came with a W3C friendly solution to insert images with or without link in the layout, being able to control it via CSS only, without writing the IMG tag on the HTML code). It also helps Google and other search engines to find the name, "title" or "alt" of the image.Image Without Link:http://www.sugarman.ca/temp/w3c/imagem_sem_link.htmImage With Link:http://www.sugarman.ca/temp/w3c/imagem_com_link.htmWe would like to have your opinion about it and sugestions are welcome![]'sFausto Balloni FilhoClient-Side - Globo.com**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Fausto Balloni wrote: It also helps Google and other search engines to find the name, title or alt of the image. Somehow I don't think Google and co. have any trouble finding the ALT attribute on images already... -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Hi Fausto, To cut things short: there is nothing wrong with images used as background via CSS as long as theses images are used as layout and not to give meaningful pieces of information to the visitors. You may end up confusing people who use text-only or speech devices. Read this article from 24ways.org, I've found it very helpful, myself. You're from Brazil, hu? I'm living in Florianópolis, WONDERFUL!!! Cheers mate!!!
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Paul,
on Wednesday, January 4, 2006 at 15:48 wsg@webstandardsgroup.org wrote:
I thought the Gilder/Levin/Shea Enhancement Method was best, but
you can't have a hover state on a graphic link using this.
Example HTML would be:
a id=header title=Revised Image Replacement
href=revised.htmlspan/spanRevised Image Replacement/a
Why?
a#header:hover span {
background: url(another url) no-repeat (or shift);
}
should work.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Images as DIV Background with and without link (w3c friendly)
Thank you foryour help,Paul. This link will be very useful!!! It is in my bookmark allready. (-: Regards from Rio de Janeiro (Brazil), Fausto. -Original Message-From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]On Behalf Of Paul CollinsSent: quarta-feira, 4 de janeiro de 2006 12:48To: wsg@webstandardsgroup.orgSubject: Re: [WSG] Images as DIV Background with and without link (w3c friendly) Hi Fausto, A good way of doing it, but It doesn't work with Images off and CSS still turned on, which becomes an Accessibility issue. Has anyone ever resolved a way ofdoing this for graphic links containing a rollover state? The problem is, IE doesn't let you add a hover state to anything other than the a tag. So thecommon methods of image replacement don't seem to work in those instances: I thought the Gilder/Levin/Shea Enhancement Method was best, but you can't have a hover state on a graphic link using this. Example HTMLwould be: a id="header" title="Revised Image Replacement" href=""span/spanRevised Image Replacement/a Anyonefoundanother method? For a good list of ideas Fausto, you could try this page if you haven't already seen it: http://www.mezzoblue.com/tests/revised-image-replacement/ Cheers,Paul - Original Message - From: Fausto Balloni To: wsg@webstandardsgroup.org Sent: Wednesday, January 04, 2006 2:16 PM Subject: [WSG] Images as DIV Background with and without link (w3c friendly) Hi All,We came with a W3C friendly solution to insert images with or without link in the layout, being able to control it via CSS only, without writing the IMG tag on the HTML code). It also helps Google and other search engines to find the name, "title" or "alt" of the image.Image Without Link:http://www.sugarman.ca/temp/w3c/imagem_sem_link.htmImage With Link:http://www.sugarman.ca/temp/w3c/imagem_com_link.htmWe would like to have your opinion about it and sugestions are welcome![]'sFausto Balloni FilhoClient-Side - Globo.com**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
Re: [WSG] Images as DIV Background with and without link (w3c friendly)
Hi Martin, thanks for your reply...
You can't use the :hover pseudo class on any
element other than an anchor in IE unfortunately. I don't have time to look too
far, but with a brief search I found this link that mentions it:
http://4umi.com/web/css/hover.htm
They say it will be fixed in the IE7 blog, but I'm
still developing back to version 5!
http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx
I've seen a _javascript_ solution, but again that
would cause Accessibility issues. Would love to hear if anyone has a solution to
this??!
- Original Message -
From:
Martin
Heiden
To: Paul Collins
Sent: Wednesday, January 04, 2006 4:07
PM
Subject: Re: [WSG] Images as DIV
Background with and without link (w3c friendly)
Paul,on Wednesday, January 4, 2006 at 15:48 wsg@webstandardsgroup.org
wrote: I thought the Gilder/Levin/Shea Enhancement Method was
best, but you can't have a hover state on a graphic link using
this. Example HTML would be: a id="header"
title="Revised Image Replacement"
href=""span/spanRevised Image
Replacement/aWhy?a#header:hover span {
background: url(another url) no-repeat (or shift);}should
work.regards
Martin**The
discussion list for http://webstandardsgroup.org/See
http://webstandardsgroup.org/mail/guidelines.cfmfor
some hints on posting to the list getting
help**
