Hi. I’m no programmer but I work with one website. It’s on WordPress and I’m satisfied with almost everything except for one minor detail. It’s the filenames which pop up every time you move the cursor over images. I understand that this is not so important, but it bothers me as a perfectionist. Also, some image names are quite long. Can anyone tell me how to get rid of this and is it even possible? Here’s the screenshot
The page I need help with: https://primesound.org/
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hi there @welcome423e5fbf39746d111f4,
What you are seeing there is the browser showing the title attribute that is set on the images when you hover over them for a certain period of time (decided by the browser, not something you can control).
Example screenshot of the title attribute
It is generally discouraged to remove titles from images, as they are important for the accessibility of a site when a user with a screen reader visits your site. You can, however, change what these titles are by changing the filenames of the images to something more descriptive of what the image is.
If this isn’t possible due to how your Wordpress is set up, you could add the following Javascript to your page which will replace the titles of the images with the alt text, which you appear to have already set to something more descriptive:
document.addEventListener("DOMContentLoaded", function() { // Run when the page has loaded
var elms = document.querySelectorAll("img[title]"); // Find all images with a title
for (var i = 0; i < elms.length; i++) {
if (elms[i].hasAttribute("alt")) {
elms[i].setAttribute("title", elms[i].getAttribute("alt")); // Set title to alt if the image has an alt attribute
} else {
elms[i].removeAttribute("title"); // Else, remove the title so you don't see the filename
}
}
});
If you do decide you’d rather simply remove the titles on the images completely, you can do so by having the following Javascript on your pages:
document.addEventListener("DOMContentLoaded", function() { // Run when the page has loaded
var elms = document.querySelectorAll("img[title]"); // Find all images with a title
for (var i = 0; i < elms.length; i++) {
elms[i].removeAttribute("title"); // Remove the title so you don't see the filename
}
});
Hope that helps with your issue! Let me know if you need anything further.
- Matt.
Thanks, Matt.
This perfectly worked for my site.
I was trying it for the past few hours and just can’t able to get it done. Finally, I did it with your help. Thanks again.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.