图片标题而不是alt

Question

I have a wordpress page with the event manager plugin. Last year we launched the bookings option form for our climbing camps and for our courses. Now we think the camps would be more interresting if the members could see the list of the attendees. It can be setting with the #_ATTENDEES which is showing the useravatar of the attendees. I'd like to display the names of the attendees with the good old method, with the mouse over trick. I see in the source code of my event page, in the code of displayed avatar, there is an 'alt' tag which contains the right member name. But it will not displaying if I move my mouse over the picture. It is not matter if I'm using chrome or other browsers. The solution would be: I think the 'alt' tag in the 'img src' row generated automatically, because I didn't find that in the attendees.php. If it would be possible to change the 'alt' tag to 'title' then it will be display. How can I solve this?

In the support of EM, I got an answer to this site, with this link: Use 'alt' value to dynamically set 'title' But I'm not an expert of jquery solutions, but as I read it, there is a solution to take the attributes of the image-alt tag into the attributes of the a-title tag. But I don't have title tag! My code is following:

 <img src="http://webaddress/wp-content/uploads/2016/03/useravatar-80x80.jpg" width="50" height="50" alt="Long John" class="avatar avatar-50 wp-user-avatar wp-user-avatar-50 alignnone photo"> 

I need to change alt=”Long John” to title=”Long John”. How can I do this?

Answer 1

You can find all img elements that have an alt and don't have a title by using jQuery's $() function with the CSS selector img[alt]:not([title]) . Then use jQuery's attr function to assign a title attribute to them from alt . You probably want to use jQuery's "ready" feature to do it when the page is loaded, since Wordpress makes putting scripts in the right place problematic I'm told:

$(function() {
    $("img[alt]:not([title])").attr("title", function() {
        return this.alt;
    });
});

If you're not already using jQuery, you don't need to add it for this. Here's a near equivalent to the above without it that works in all vaguely-modern browsers:

document.addEventListener("DOMContentLoaded", function() {
    Array.prototype.forEach.call(document.querySelector("img[alt]:not([title])", function(img) {
        img.title = img.alt;
    });
}, false);

More:

• CSS attibute presence selector
• CSS :not pseudo-class
• $(function) - the "ready" feature
• $(selector)
• attr (with a function callback)
• DOM HTMLImageElement 's alt property
• DOMContentLoaded
• addEventListener
• querySelectorAll
• Array.prototype.forEach

If you need to support obsolete browsers without addEventListener , this answer has a cross-browser option for you. Said browser will also need a polyfill for forEach , which is described in the linked page above.