Adding Alt tag for images being loaded in Javascript array

Question

I have these images in an array and I'm wondering how could I possibly add different Alt tag to each images.

The images are called using the HTML Code below:

<div class="output" id="output">
  <h2 class="cursor"></h2>
</div>
<div class="slideshow__image">
  <img src="https://example.com/image-1.png">
</div>

Below is the Javascript

  var i = 0,
    a = 0,
    isBackspacing = false,
    isParagraph = false;
  // Typerwriter
  var textArray = [
    "This is Sparta",
    "Kings of the kings",
    "and the queens of the land",
    "Where no one lives"
  ];
  // Images
  var images = {
    0: {
      "urls": [
        "https://example.com/image-1.png"
      ]
    },
    1: {
      "urls": [
        "https://example.com/image-2.png"
      ]
    },
    2: {
      "urls": [
        "https://example.com/image-3.png"
      ]
    },
    3: {
      "urls": [
        "https://example.com/image-4.png"
      ]
    }
  }
  var speedForward = 100,
    speedWait = 1000,
    speedBetweenLines = 1000,
    speedBackspace = 25;
  typeWriter("output", textArray);

  function changeImage(number) {
    var imagesArr = [];
    images[number].urls.forEach(function(url) {
      imagesArr.push(url);
    })
    $('.slideshow__image img').fadeOut(100, function() {
      $(".slideshow__image").children().attr('src', imagesArr).fadeIn(500);
    });
  }

  function typeWriter(id, ar, callback) {
    var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h2"),
      eParagraph = element.children("p")
    count = 0;
    if (!isBackspacing) {
      if (i < aString.length) {
        if (aString.charAt(i) == "|") {
          isParagraph = true;
          eHeader.removeClass("cursor");
          eParagraph.addClass("cursor");
          i++;
          setTimeout(function() {
            typeWriter(id, ar);
          }, speedBetweenLines);
        } else {
          if (!isParagraph) {
            eHeader.text(eHeader.text() + aString.charAt(i));
          } else {
            eParagraph.text(eParagraph.text() + aString.charAt(i));
          }
          i++;
          setTimeout(function() {
            typeWriter(id, ar);
          }, speedForward);
        }
        count++;
      } else if (i == aString.length) {

        isBackspacing = true;
        setTimeout(function() {
          typeWriter(id, ar);
        }, speedWait);
      }
    } else {
      if (eHeader.text().length > 0 || eParagraph.text().length > 0) {
        if (eParagraph.text().length > 0) {
          eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
        } else if (eHeader.text().length > 0) {
          eParagraph.removeClass("cursor");
          eHeader.addClass("cursor");
          eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
        }
        setTimeout(function() {
          typeWriter(id, ar);
        }, speedBackspace);
      } else {
        isBackspacing = false;
        i = 0;
        isParagraph = false;
        a = (a + 1) % ar.length;
        setTimeout(function() {
          typeWriter(id, ar);
        }, 50);
        changeImage(a);
      }
    }
  }

Not specified what source of alt is....assume it is the textArray items? — charlietfl
– charlietfl, Commented Nov 2, 2019 at 18:10

BugsArePeopleToo · Accepted Answer · 2019-11-02 18:21:03Z

2

You can change multiple element attributes by passing an object into jQuery attr() function where each key of the object corresponds to the attribute you are changing.

Inside your changeImage function change this line:

$(".slideshow__image").children().attr('src', imagesArr).fadeIn(500);

to this:

$(".slideshow__image").children().attr({ src: imagesArr, alt: textArray[number] }).fadeIn(500);

answered Nov 2, 2019 at 18:21

BugsArePeopleToo

3,0061 gold badge17 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elaine Byene Over a year ago

Thank you. However, you're mistaken. That text is not for alt. it's a typing effect. I need to enter the Alt elsewhere. I'm sorry I wasn't specific.

BugsArePeopleToo Over a year ago

My answer shows how to add the alt tag. Use whatever value you like.

ReSedano Over a year ago

@ElaineByene I think the procedure behind this answer is correct. You can change the textArray with another array containing your alt if they are different.

Collectives™ on Stack Overflow

Adding Alt tag for images being loaded in Javascript array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related