Set HTML attrbuites from SharePoint content type fields in page layouts

The Problem / Example : Need to put the “alt” attribute in the HTML “img” element from a content type field “Title” in a custom page layout and the content type fields represented as a SharePoint controls like that

You can do that simply by CSS/ JQuery :

1-Hide the SharePoint control that represent the field value using CSS and give the span container an ID “Ex: spanTitle” :

2-Write the HTML “img” element with attribute “alt” empty and give it an id “Ex:exampleImage”  :

3-Write these lines of JQuery that will fetch the value from the hidden span and put it to the “alt” attrbuite in the “img” element :

Thanks !