JWill23 JWill23 - 5 months ago 26
Ajax Question

Set an HTML img title attribute using javscript

UPDATE: Got the title to pull properly but in Internet Explorer the title of the image is not showing up. Works in Firefox and Chrome. I cannot get my head around it, I'm talking about this:

<script type="text/javascript" src="//www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<html>
<i><strong><a href="__URL__" target="_blank">PDW Status: </a></strong></i>
<a href="__URL__" target="_blank"></a>
<a href="__URL__" target="_blank"><br/></a>

<a href="__URL__" target="_blank">Green</a>&#160;-
<img id="Green" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="lightgreen1.jpg"
src="__URL__" style="margin: 5px;"/></em>&#160;&#160;&#160;&#160;&#160;

<a href="__URL__" target="_blank">Red</a>&#160;-
<img id="Red" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="red1.jpg"
src="__URL__" style="margin: 5px;"/></em>&#160;&#160;&#160;&#160;&#160;

<a href="__URL__" target="_blank">Yellow</a>&#160;-
<img id="Yellow" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="yellow1.jpg"
src="__URL__" style="margin: 5px;"/>&#160;&#160;&#160;&#160;&#160;

<a href="__URL__" target="_blank">White</a> &#160;-
<img id="White" class="ms-rteImage-2 ms-rtePosition-4" alt="white.jpg"
src="__URL__" style="margin: 5px;"/>&#160;

</html>


<style>
a:link { text-decoration: none;
color: #0072c6 } a:visited { text-decoration: none; color: #0072c6 } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
</style>‚Äč

<script type="text/javascript">
//Grab data from list and post into HTML Fields
$(function() {
green = "";
yellow = "";
red = "";
white = "";

$.ajax({
url: "__URL__",
headers: {"Accept": "application/json;odata=verbose"},
type: "GET",
cache: false,
async: false,

}).success(function (data) {
$.each(data.d.results, function(key, value) {
console.log(value.Title);
switch (value.Title) {
case "GREEN":
green += value.Description;
console.log("GREEN TEST" + green);
var gDescription = document.querySelector('#Green');
gDescription.title = "" + green;
break;
case "YELLOW":
yellow += value.Description;
console.log("YELLOW TEST" + yellow);
var yDescription = document.querySelector('#Yellow');
yDescription.title = "" + yellow;
break;
case "RED":
red += value.Description;
console.log("RED TEST" + red);
var rDescription = document.querySelector('#Red');
rDescription.title = "" + red;
break;
default:
white += value.Description;
console.log("WHITE TEST" + white);
var wDescription = document.querySelector('#White');
wDescription.title = "" + white;
}
});
});
});

</script>


This is a related question but that did not seem to fix it either: why can't I set an ascii reference in an img title attribute using js?

Answer

Have you tried:

var image = document.querySelector('img');
image.title = 'Your title'; // Assigning directly to attribute.
image.setAttribute('title', 'Your other title'); // Assigning by method.

This is how you could set a HTML image title attribute using javascript