Curso JavaScript desde 0. JQuery XI Leyendo y cambiando atributos HTML I. Vídeo 39

En este vídeo vemos la función attr de la librería JQuery que nos permite modificar dinámicamente atributos de etiquetas HTML.

Vemos un ejemplo de uso donde utilizando la función attr conseguimos un efecto rollover sobre una galería de imágenes.

[TheGex]

Para los que lo vean ahora, hay una propiedad css3 que es opacity y su default es "1". Solo es cambiar esa propiedad a 0.5 para que vean mas transparente.

[fercode]

No existe mejor profe de programación en YouTube. Lo digo porque si por algún misterio, no lo entienden a él, no entenderán a NADIE jaja.. enseña PERFECTO.

[aaronzunigaleal]

Mi forma de apoyar es cada que empieza video nuevo dejo correr los 2 anuncios que me pone Youtube, en esos 3 minutos aprovecho para tomar agua etc. y distraerme, regreso y ya corrieron los anuncios y estoy listo ´para aprender mas!

[thrafiker]

No he visto que pida apoyo economico pero con gusto le daria algo, he aprendido bastante en 2 cursos con usted y creo que algunos tambien lo apoyarian.

excelentes cursos, saludos :)

[juandavidbetancurmolina]

Estoy feliz con mi progreso y se lo debo mucho a usted profesor, muchisimas gracias, eres una gran persona

[CristianMartinezcrismarpe]

Eres un grande profesor me encantan tus Cursos y estoy aprendiendo mucho, un saludo

[claudiomendieta]

Explicación absolútamente perfecta!! Millones de gracias!

[Ni_idea_de_tecnologia]

Explicación muy sencilla y fácil de entender. Gracias

[gmsbox]

Buenas soy estudiante de desarrollo de aplicaciones web y sigo tus cursos, estoy ahora en este, el de JavaScript. Ya estuve en el de Java(no entero). Decirte que me parece increíble lo bien que explicas (mucho mejor que algunos profesores...) y solo dejar una duda/sugerencia, se que este video trata de cambiar los atributos de html, pero en este caso no sería mejor darle a las imágenes un efecto de transparencia con CSS y luego quitarlo con addClass o alguno de los anteriores, así no tendrías que tener el doble de imágenes.

Un saludo sigue así.
En cuanto termine este curso a por el de Php. ; ).

[MrCharlypesc]

GRACIAS CRACK, LAMENTO LO DE ESPAÑA, LE HICE EL AGUANTE DESDE ACÁ, SALUDOS DE CHILE.(SI ERES AMANTE DEL FUTBOL, OBVIO)

[RodrigoMontes]

$(document).ready(function () {
$(".galeria img").hover(function () {
// over
$(this).css("opacity", "1");

}, function () {
// out
$(this).css("opacity", "0.5");
}
);
});

Creo que este código serviría de igual forma, un poco más sencillo pero creo que logra el efecto esperado. :)

[miguelangelvasquezgarcia]

Excelente Video y gracias por esta explicaciones tan geniales.

[xabierapariciomunoa]

Hola Juan! Tengo un problema al intentar acceder desde JavaScript a código HTML escrito en PHP. Creo que voy bien. Te dejo aquí los scripts:
$(document).ready(function(){

var
document.write(elementos); Me devuelve UNDEFINED, de todas las maneras que intento acceder a td mediante el class name.

/*var

})

PHP

echo "<tr><td>Resultado de Explotación: </td><td class='align'>" . number_format($registro2['RESULT_EXPL'], '0', ', ', '.') . " €" . "</td>" . "<td . $Result_Expl . "%" . "</td></tr>";

He consultado en Google y no nada, así me encuentro xD

[cocacalvo]

Buenas yo utilicé este codigo en las fuciones restaurar y cambiar que es más corto. Que os parece?

[iamtheomega]

En la funcion HOVER de css no se podrá hacer los mismo de reemplazar imagenes?

[xeovanijuarez]

Otra duda maestro, si solo quisiéramos cambiar algunas imágenes de cierta tabla y no todas las de la pagina ¿como las seleccionaríamos? no siempre podríamos usar "querySelectAll". Pues supongamos que tenemos otra tabla con imágenes también.

[danasara]

Sacame de una duda que no he preguntado hasta el momento... ¿el argumento "false" que función cumple?

[javito]

Este mismo efecto se podría hacer con css a traves del hover con la propiedad opacity, no?

[olimac]

Un aporte, a está fecha, usando solo Javascript el primer ejemplo se puede hacer de la siguiente manera:

<script>

window.addEventListener('load', function(){

var element =

element.addEventListener('mouseover', function(){

element.setAttribute('src', 'imgs/atardecer.jpg');

});

element.addEventListener('mouseout', function(){

element.setAttribute('src', 'imgs/arbol.jpg');

});
});

</script>

[mauroespinosa]

Como puedo hacer este mismo efecto pero si tengo muchas imagenes? Se puede igual pero quedaria un codigo muy extenso