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, eg "Some Photo" instead of "Some-Photo.jpg".
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.
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:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.