Home >
<img src="images/accept.png" alt="Accept"><br />
<img src="images/application_error.png" alt="Error" title="Error"><br />
<img src="images/accept.png" alt="Accept"><br />
<img src="images/application_error.png"><br />
I've got 4 images here. The first has an ALT attribute, but no TITLE. The second has both an ALT and a TITLE. The third is just a copy of the first. The last has no ALT or TITLE.
I began looking at jQuery selectors to see if it was possible to find all images that were missing a TITLE attribute. This can be done with the following selector:
img:not([title])
Reading left to right we have: All img tags NOT having title as an attribute.
I tested this selector by simply adding a border around them:
$("img:not([title])").css("border","3px solid red")
That worked like a charm. Now I needed to modify it so that I could set the TITLE attribute to the ALT value. A follower on Twitter suggested using the each operator:
$("img:not([title])").each(function() {
$(this).attr("title", $(this).attr("alt"))
})
This worked like a charm, but obviously, only worked in cases where the ALT attribute existed. Many times the filename of the image can give you a clue as to what the image does. I don't know about you, but I will often run across web apps that make use of tiny icons (with no title attribute) that leave me scratching their head as to their actual purpose. I modified the code a bit to use the SRC attribute when ALT was empty.
$("img:not([title])").each(function() {
if($(this).attr("alt") != '') $(this).attr("title", $(this).attr("alt"))
else $(this).attr("title", $(this).attr("src"))
})
This worked like a charm on my fourth image. Once again - jQuery amazes me. I've included the entire HTML for my example below.
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function() {
$("img:not([title])").each(function() {
if($(this).attr("alt") != '') $(this).attr("title", $(this).attr("alt"))
else $(this).attr("title", $(this).attr("src"))
})
});
</script>
</head>
<body>
<img src="/images/accept.png" alt="Accept"><br />
<img src="/images/application_error.png" alt="Error" title="Error"><br />
<img src="/images/accept.png" alt="Accept"><br />
<img src="/images/application_error.png"><br />
</body>
</html>
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Neat idea. I'd just run into that Firefox cause the other day and didn't realize it's just a FF thing. One question I'd have is why fall back to using src as a tooltip? It might depend on a particular use case, but I'd rather keep that if() and lose the else. :-)
The idea to use the src came from the fact that - sometimes - the name of the image is a hint as to what it does. So for example, an icon named user-deactivate.png - that tells me the icon does a deactivation event.
How about some formatting? Here's some quick code for the else statement:
function imgSrcToLabel(src) {
result = /([^\\\/]+)\.(png|jpg|gif)?$/.exec(src);
if (result) {
return result[1].replace(/[-_]/, " ");
}
return src;
}
So, the image http://raptureinvenice.com/images/user-delete.png would turn into title text user delete and if we used a capitalization routine User Delete.
Could be quite handy, I like your thought process.
My only concern would be - as a file path, I know in my head that it may not be the REAL purpose of the image, whereas the prettier version may imply more than it really means.
Then again, I'm probably over thinking it. ;) Cool mod!
This can be re-written two different ways with just jQuery, removing the if block
$("img:not([title])") .filter(":not([alt])").each(function(){$(this).attr("title",$(this).attr("src"))}).end() .filter("[alt!='']").each(function(){$(this).attr("title",$(this).attr("alt"))});-or-
$("img:not([title]):not([alt])").each(function(){$(this).attr("title",$(this).attr("src"))}); $("img:not([title])[alt!='']").each(function(){$(this).attr("title",$(this).attr("alt"))});This isn't a problem with FireFox, it's a problem with Internet Explorer. ALT text should never be shown to anyone except for those unable to view the images. However, instead of the proper TITLE text in IE, you get ALT text.
It would be so nice if Micro$oft would follow W3C standards, instead of trying to create their own.