How can I automatically add an image's "alt" attribute using the image's filename - problem

Question

I would like the "alt" to be displayed when hovering over the image. Everything works fine, except that although the photo has "alt" without the "-" and ".jpg" signs, the "alt" of the photo is displayed with these signs. When I edit these codes in "codepen" everything works ok but after uploading the codes to the page they don't work as they should.The CSS code is ok. It's about helping with JS.

<img class="img" src="https://photoooo777.com/Some-Photo.jpg" alt="Some Photo" width="200" height="300">
<p class="alt">Some-Photo.jpg</p>

$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
  $(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});

$(document).ready(function () {
  $("img").each(function () {
    var $img = $(this);
    var filename = $img.attr("src");
    if (typeof attr == typeof undefined || attr == false) {
      var altText = filename.substring(
        filename.lastIndexOf("/") + 1,
        filename.lastIndexOf(".")
      );
      altText = altText.replace("-", " ").replace(".jpg", "");
      $img.attr("alt", altText);
    }
  });
});

Please help me edit these codes so that the name is displayed on hover, e.g. "Some Photo" instead of "Some-Photo.jpg".

Answer 1

You can remove the line where you are setting the alt attribute of the image to the file name by removing this line:

$img.attr("alt", altText);

Also you don't need to wrap the images in a div with class alt-wrap and add a new p element with class alt after the image.

Instead, you can use the title attribute to show the text on hover over image. You can set the title attribute to the same value as the alt attribute on each image:

$("img").each(function () {
    var $img = $(this);
    var altText = $img.attr("alt");
    $img.attr("title", altText);
});

This way you don't need to create any new elements and you can remove the wrapping and the p element.

Answer 2

My entire code looks like this:

$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
  $(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});

$(document).ready(function () {
  $("img").each(function () {
    var $img = $(this);
    var filename = $img.attr("src");
    if (typeof attr == typeof undefined || attr == false) {
      var altText = filename.substring(
        filename.lastIndexOf("/") + 1,
        filename.lastIndexOf(".")
      );
      altText = altText.replace("-", " ").replace(".jpg", "");
      $img.attr("alt", altText);
    }
  });
});

.img2 { 
    max-width: 100%; 
    height: 100%;
    margin: 0; 
    padding: 0px;
    column-count: max-width;
    background-color: white;
  }

  .img-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
  }

  .img { 
    display: block; 
}

    .alt-wrap { 
      display: block;
      position: relative;
      margin: 20px;
      color: whitesmoke;
      border: 5px solid transparent;
     border-image:   linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
    }

    .alt-wrap p.alt {
      position: absolute;
      opacity: 0; /* hide initially */
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 15px;
      font-size: 14px;
      line-height: 22px;
      background-color: transparent;
      transition: all 10ms linear;
      transition-delay: 300ms;
      text-align: center;
    }

    .alt-wrap:hover > p.alt { 
      opacity: 1; 
      transition-delay: 0s;
      text-align: center;
      font-weight: 900;
      color: white;
      font-size: 150%;
      border: 20px solid transparent;
      margin-left: 1%;
      margin-right: 1%;
      text-shadow: 0 0 10px black;
    }

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="img2"><div class="img-fluid"><div class="img-wrap"><img class="img" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" alt="Some Photo" width="200" height="300">

The first script puts something like this into the html code:

<div class="img2"><img class="img" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" alt="Some Photo" width="200" height="300">
<p class="alt">Some-Photo.jpg</p></div>

I would like "alt" to be displayed after hovering the cursor, but without "-" and ".jpg" Sorry, I'm new to programming :)