I have a thumbnail image that when clicked changes a larger image on the page. I have that part of the code working by just changing the .src with onclick. Is there also a way to change the alt and title attributes with onclick?
+3
A:
You can use setAttribute or set the property directly. Either way works, the setAttribute is the standard DOM way of doing it though.
el.onclick = function() {
var t = document.getElementById('blah');
// first way
t.src = 'blah.jpg';
t.title = 'new title';
t.alt = 'foo';
// alternate way
t.setAttribute('title', 'new title');
t.setAttribute('alt', 'new alt');
t.setAttribute('src', 'file.jpg');
}
meder
2010-07-10 20:16:38
Both ways are absolutely standard. `src`/`alt`/`title` is specified in DOM Level 1 HTML. I would recommend these properties over `setAttribute` because accessing them is much clearer to read, and there are severe bugs in IE for `getAttribute`/`setAttribute` where the DOM properties different from the HTML attributes.
bobince
2010-07-10 21:40:42
I personally use the DOM 0 style of direct property setting myself, and yes there are bugs.
meder
2010-07-10 21:41:48
Thank you for the additional clarification on this question bobince.
computersaurus
2010-07-19 13:07:52
+1
A:
img.onclick = function() {
// old fashioned
img.src = "sth.jpg";
img.alt = "something";
img.title = "some title";
// or the W3C way
img.setAttribute("src", "sth.jpg");
img.setAttribute("alt", "something");
img.setAttribute("title", "some title");
};
Note: No matter which one you're using as long as you're dealing with standard attributes.
galambalazs
2010-07-10 20:16:55
In terms of browser compatibility is the "old fashioned" and "W3C" way the same?
computersaurus
2010-07-10 20:59:18
In this limited case yes, but in general no, IE has many problems with `getAttribute`/`setAttribute` and so you should **avoid** those methods if at all possible. nb. Attributes and properties are different things in many cases! In this case, `.src` when setting behaves the same as setting the attribute `src`, but on reading it will return the full URL the attribute was pointing to, which will be different for relative URLs. (This won't happen in IE, due to the aforementioned bugginess.)
bobince
2010-07-10 21:42:07
@computersaurus bobince, is correct. There are a couple of bugs with IE implementation. The ones I know is `src/href` url relativeness, `for`, `style` and `class`.
galambalazs
2010-07-10 22:32:03
...plus every property made of multiple words (capitalisation/hyphens), and everything that's a datatype other than `String`: all numeric and boolean properties, event handlers, and also doing `setAttribute` on form fields' `value`/`checked`/`selected` attributes doesn't do what you might think. It's a morass. Avoid.
bobince
2010-07-11 01:10:12
yeah I myself have never used them other than for strings, mainly custom attributes.
galambalazs
2010-07-11 07:35:37
+2
A:
In exactly the same way..
document.getElementById('main_image_id').title = 'new title'
document.getElementById('main_image_id').alt = 'new alt'
James Gaunt
2010-07-10 20:18:15