Automatically adding the 'alt' attribute to every image on a page

Question

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" />

score 14 · Accepted Answer · edited May 23 '17 at 12:17

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) {

edited May 23 '17 at 12:17

Community

1
1

answered Apr 27 '11 at 07:41

Mark Keats

1,390
8
15

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 http://tools.arantius.com/tabifier – Charles Yeung Apr 27 '11 at 07: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 '11 at 07: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? – Charles Yeung Apr 27 '11 at 07:52
You would need to use something like this solution: http://stackoverflow.com/questions/982717/how-do-i-get-the-entire-pages-html-with-jquery – Mark Keats Apr 27 '11 at 07: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 '15 at 16:21

score 3 · Answer 2 · edited Nov 17 '14 at 20:26

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!

edited Nov 17 '14 at 20:26

DavidRR

18,291
25
109
191

answered Apr 27 '11 at 07:37

Axe

6,285
3
31
38

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 '11 at 07:40

score 0 · Answer 3 · edited Sep 18 '14 at 17:48

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>

Automatically adding the 'alt' attribute to every image on a page

3 Answers3