3

I have a requirement to add the alt attribute to each of the images on each of my web pages. The problem is that there are hundreds of images on some of those web pages.

Can anyone suggest an approach using JavaScript or jQuery that, for each image on a page, copies the name of the image (minus the extension) to a new alt attribute?

Before:

<img src="android.jpg width="100" height="50" />

After (exclude ".jpg"):

<img src="android.jpg width="100" height="50" alt="android" />

3 Answers 3

14

In jQuery:

$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring(0, filename.lastIndexOf('.')));
  });
});

You could ask before if alt attribute doesn't already exist by adding:

var attr = $(this).attr('alt');
    if (typeof attr == typeof undefined || attr == false) {
5
  • Thanks for the suggestion, how can I paste some HTML code and click a button to run this script, final output the script? like this tools.arantius.com/tabifier Apr 27, 2011 at 7:45
  • This will run when the page loads. If you want to change it to run on a button click then replace $(document).ready(function() { with $('#buttonId').bind('click', function() { (replacing #buttonId with the correct selector)
    – Mark Keats
    Apr 27, 2011 at 7:47
  • I don't want to run this script every time when user browse this page, so can I get this updated source code and paste it on the page? Apr 27, 2011 at 7:52
  • You would need to use something like this solution: stackoverflow.com/questions/982717/…
    – Mark Keats
    Apr 27, 2011 at 7:57
  • I think it would be nice if you add a breakdown of what's happening for those of us that are learning javascript or jQuery. For example, I was able to follow it all, up until the filename.substring part. I think it's important that people are able to actually learn and understand answers, other than just copy/paste them and be like, "okay it works, cool. Don't know why, but it works". Thanks :)
    – Soundfx4
    May 26, 2015 at 16:21
3

Here is a JavaScript approach:

function runScript() {
    for (i = 0; i < document.getElementsByTagName("img").length; i++) {
        document.getElementsByTagName("img")[i].setAttribute(
            "alt", document.getElementsByTagName("img")[i].src);
    }
}

Run the function runScript() once the page is loaded!

1
  • 3
    However, adding alt on clientside by JavaScript does not really help you all that much. For one thing, Google won't see them. For another, the text-only browsers like lynx (which are most likely to need alt) won't see them. You only gain a little bit of benefit on accessibility, but even that is lost unless you have really really nice image file names.
    – Amadan
    Apr 27, 2011 at 7:40
0

This script can help you to get your work handled. It will append the filename of image in alt attribute

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>  
 <script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
   $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));  
   $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));  
  });  
 });  
 //]]>  
 </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.