Autor Tema: HTML y JavaScript crear efectos de cambios de color Eventos mouseover CU01157E  (Leído 2054 veces)

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Adjunto mi código para el ejercicio CU01157E del curso de javascript desde cero:

Código: [Seleccionar]
<!DOCTYPE html>
<html> <head><title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<script>
window.onload = function(){
   
    var haches = document.querySelectorAll('h1,h3');
    var pes = document.querySelectorAll('p');
    for (var i = 0; i<haches.length ;i++){
        haches[i].onmouseover = function(){return this.style.color = "orange"};
        haches[i].onmouseout = function(){return this.style.color = "brown"};
    }
   
    for (var i = 0;i<pes.length;i++){
       
        pes[i].onmouseover = function(){return this.style.backgroundColor = "yellow"};
        pes[i].onmouseout = function(){return this.style.backgroundColor = "transparent"};
    }
   
}   

   
</script>

</head>

 <body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>

<h1>Novedades</h1>

<p>Aquí presentamos las novedades del sitio.</p>

<h3>Lanzamos el producto X-FASHION</h3>

<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>
« Última modificación: 21 de Febrero 2016, 18:35 por César Krall »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01157E Eventos JavaScript
« Respuesta #1 en: 20 de Febrero 2016, 01:06 »
bermartinv.

Tu código esta muy bien, resuelve a la perfección lo que requería el enunciado.

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".