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: > > href="">Revised Image ReplacementWhy?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)
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)
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: > > href="">Revised Image ReplacementWhy?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 for your 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 of doing 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 tag. So the common 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 HTML would be: Revised Image Replacement Anyone found another 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.cfm for some hints on posting to the list & getting help**
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: > href="revised.html">Revised Image Replacement 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)
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)
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, 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 of doing 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 tag. So the common 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 HTML would be: Revised Image Replacement Anyone found another 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.cfm for some hints on posting to the list & getting help**