Set an HTML img title attribute using javascript
Question
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> -
<img id="Green" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="lightgreen1.jpg"
src="__URL__" style="margin: 5px;"/></em>     
<a href="__URL__" target="_blank">Red</a> -
<img id="Red" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="red1.jpg"
src="__URL__" style="margin: 5px;"/></em>     
<a href="__URL__" target="_blank">Yellow</a> -
<img id="Yellow" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="yellow1.jpg"
src="__URL__" style="margin: 5px;"/>     
<a href="__URL__" target="_blank">White</a>  -
<img id="White" class="ms-rteImage-2 ms-rtePosition-4" alt="white.jpg"
src="__URL__" style="margin: 5px;"/> 
</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?
1 answers
solution1
0 ACCPTED 2016-06-30 16:28:26
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Set src attribute of an html collection(img) from an array of paths as values to set on each img using ES6 pure Javascript?
Cannot set title and alt attributes in my img using javascript
set HTML Attribute using JavaScript
set the title of an html page using javascript
why can't I set an ascii reference in an img title attribute using js?
How to set a title attribute of a form button (not having an id) using JavaScript
set javascript variable using html attribute
How to set nonstandard attribute in html using javascript
Set src attribute of img tag with javascript
Fetch an url img data and set it in a src attribute of an img in my html
Related Tags