I'd just like to note that the Shea Image Replacement (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/tests/revised-image-replacement/index.php#shea">http://www.mezzoblue.com/tests/revised- ... x.php#shea</a><!-- m -->) can be used as a link, simply by using an empty <a> element, with all the neccessary attributes filled out (href, tabindex, title, w/e) and using that in the place of a <span>. I'm sure many of you have thought of this, I just wanted to post it in case someone who didn't know this comes along. And, yes, I'm aware that in IE the image kind of spazzes, but it still works.care to enlighten us on how?Sam, he said how:Originally posted by omega
I'd just like to note that the Shea Image Replacement (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/tests/revised-image-replacement/index.php#shea">http://www.mezzoblue.com/tests/revised- ... x.php#shea</a><!-- m -->) can be used as a link, simply by using an empty <a> element, with all the neccessary attributes filled out (href, tabindex, title, w/e) and using that in the place of a <span>.But this isn't an enhancement. Why would you use an <a> tag? You're not creating a link, your are replaceing text with an img in a header.
I don't like the Shea method because it uses an empty span tag which doesn't make any sense, however it seems to be the only way to get it display text when images are disabled. Currently I have been using my own method:<h1><span></span></h1>
h1{
width:x;
height:y;
background:url(abc.gif) no-repeat;
}
h1 span{
position:absolute;
top:-99999px;
left:-99999px;
}OK, i misread him, but I'm with you lavalamp... even if you are using it on a link, an empty A is just as meaningless sematically as an empty span, even with all of its attirbutes filled out I believe screenreaders will just skip right over it.Yes ,I know, semantically worthless, but functionally good. It allows you to use an image as a link, without using the <img /> tag, which as far as I see it is presentational markup. Also, you can have rollover effects, a different image if the link has been visited, and it all works in IE. Also, if the link is part of your navigation, you could simply add a second link, like:
#header {width: image; height: dimensions; position: relative; overflow: hidden; margin: 0;}
#header a.sir {background: url(images/header.png) no-repeat; position: absolute; width: 100%; height: 100%;}
#header a.sir:hover {background-image: url(images/header-hover.png);}
...
<h1 id="header"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/">Header text</a> <a href="/" class="sir"></a></h1>Well you probably wouldn't use a header a link but if you wanted image rollovers in a link then I'm not sure how correct it would be to have an empty link tag and then the text outside it. A screen reader would read the link as if it had nothing in it and then read some seeming unrelated text.yes, you would- for a link to your homepage. And i beleive the screen reader would ignore the link altogether. And it wouldn't be just an empty link tag, it'd be that, and then a normal link
I'd just like to note that the Shea Image Replacement (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/tests/revised-image-replacement/index.php#shea">http://www.mezzoblue.com/tests/revised- ... x.php#shea</a><!-- m -->) can be used as a link, simply by using an empty <a> element, with all the neccessary attributes filled out (href, tabindex, title, w/e) and using that in the place of a <span>.But this isn't an enhancement. Why would you use an <a> tag? You're not creating a link, your are replaceing text with an img in a header.
I don't like the Shea method because it uses an empty span tag which doesn't make any sense, however it seems to be the only way to get it display text when images are disabled. Currently I have been using my own method:<h1><span></span></h1>
h1{
width:x;
height:y;
background:url(abc.gif) no-repeat;
}
h1 span{
position:absolute;
top:-99999px;
left:-99999px;
}OK, i misread him, but I'm with you lavalamp... even if you are using it on a link, an empty A is just as meaningless sematically as an empty span, even with all of its attirbutes filled out I believe screenreaders will just skip right over it.Yes ,I know, semantically worthless, but functionally good. It allows you to use an image as a link, without using the <img /> tag, which as far as I see it is presentational markup. Also, you can have rollover effects, a different image if the link has been visited, and it all works in IE. Also, if the link is part of your navigation, you could simply add a second link, like:
#header {width: image; height: dimensions; position: relative; overflow: hidden; margin: 0;}
#header a.sir {background: url(images/header.png) no-repeat; position: absolute; width: 100%; height: 100%;}
#header a.sir:hover {background-image: url(images/header-hover.png);}
...
<h1 id="header"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/">Header text</a> <a href="/" class="sir"></a></h1>Well you probably wouldn't use a header a link but if you wanted image rollovers in a link then I'm not sure how correct it would be to have an empty link tag and then the text outside it. A screen reader would read the link as if it had nothing in it and then read some seeming unrelated text.yes, you would- for a link to your homepage. And i beleive the screen reader would ignore the link altogether. And it wouldn't be just an empty link tag, it'd be that, and then a normal link