Links issues...

May 13, 2019 107 views
WordPress

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/

1 Answer

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.

Have another answer? Share your knowledge.