Home/ Questions/Q 4549668
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T16:23:32+00:00

I am working on a site that has a page that will have a

  • 0

I am working on a site that has a page that will have a couple hundred thumbnails. I would like to have the filenames (the src) of the images populate the alt fields. So for example, I currently have the thumbnails as follows: 

<img src="images/thumb1.jpg" />

I would like to populate the alt fields with the filename. So, the desired result would be: 

<img src="images/thumb1.jpg" alt="thumb1" />

Is there a way I can automatically generate these alt tags using the images src?

Any suggestions are appreciated. Thank you for the help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An untested, first guess, would be:

    var images = document.getElementsByTagName('img');
var numImages = images.length;

for (i=0; i<numImages; i++) {
    images[i].alt = images[i].src;
}

    JS Fiddle demo.

    Just to demonstrate how much easier this can be, with a JavaScript library, I thought I’d also offer the jQuery demo too:

    $('img').each(
    function(){
        this.alt = this.src;
        this.title = this.src;
    });

    jQuery-based JS Fiddle demo.

    Edited because I’m an idiot…

    I forgot to point out that you’ll need to wait for the window to finish loading (or, at least, for the document.ready event), so try it this way:

    function makeAlt() {
    var images = document.getElementsByTagName('img');
    var numImages = images.length;
    for (i = 0; i < numImages; i++) {
        images[i].alt = images[i].src;
        images[i].title = images[i].src;
    }
}

    And change the opening body tag to:

    <body onload="makeAlt">

    JS Fiddle demo.

    Edited to address the OP’s final question:

    function makeAlt() {
    var images = document.getElementsByTagName('img');
    var numImages = images.length;
    var newAlt, stopAt;
    for (i = 0; i < numImages; i++) {
        newAlt = images[i].src.split('/').pop();
        stopAt = newAlt.indexOf('.');
        newAlt = newAlt.substring(0,stopAt);
        images[i].alt = newAlt;
        images[i].title = newAlt;
    }
}

    JS Fiddle, though I suspect there’s a far more concise way…

    • 0