Tengo una imagen en miniatura que cuando hace clic cambia una imagen más grande en la página. Tengo esa parte del código funcionando simplemente cambiando el .src con onclick. ¿Existe también una forma de cambiar los atributos alt y title con onclick?Cambiar la imagen alt con Javascript onclick
Puede usar setAttribute o establecer la propiedad directamente. De cualquier manera funciona, el setAttribute es la forma estándar DOM de hacerlo.
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');
}
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");
};
Nota: No importa que uno que está utilizando, siempre y cuando usted está tratando con los atributos estándar.
En términos de compatibilidad del navegador, ¿es el mismo "pasado de moda" y "W3C"? – computersaurus
En este caso limitado, sí, pero en general no, IE tiene muchos problemas con 'getAttribute' /' setAttribute' y, por lo tanto, ** debes evitar ** esos métodos si es posible. nótese bien. ¡Los atributos y las propiedades son cosas diferentes en muchos casos! En este caso, '.src' cuando la configuración se comporta igual que la configuración del atributo' src', pero al leerla devolverá la URL completa a la que apuntaba el atributo, que será diferente para las URL relativas. (Esto no sucederá en IE, debido al bugginess antes mencionado.) – bobince
@computersaurus bobince, es correcto. Hay un par de errores con la implementación de IE. Los que conozco son 'src/href' url relativeness,' for', 'style' y' class'. – galambalazs
Exactamente de la misma manera ..
document.getElementById('main_image_id').title = 'new title'
document.getElementById('main_image_id').alt = 'new alt'
Ambas formas son absolutamente estándar. 'src' /' alt'/'title' se especifica en DOM Level 1 HTML. Recomendaría estas propiedades sobre 'setAttribute' porque acceder a ellas es mucho más claro de leer, y hay errores graves en IE para' getAttribute'/'setAttribute' donde las propiedades DOM difieren de los atributos HTML. – bobince
Yo personalmente uso el estilo DOM 0 de la propiedad directa configurándome yo mismo, y sí, hay errores. –
Gracias por la aclaración adicional sobre esta pregunta bobince. – computersaurus