Autor Tema: JavaScript. Eventos, manejador(event handler) onmouseover function CU01157E  (Leído 2082 veces)

JuansT

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 44
    • Ver Perfil
Muy buenas

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 type="text/javascript">

window.onload = function(){
h1AndH3();
parrafo();
}
function h1AndH3(){
var h1Elems = document.getElementsByTagName('h1');
for(var i=0;i<h1Elems.length;i++){
h1Elems[i].onmouseover = over;
h1Elems[i].onmouseout = out;
}
function over(){
this.style.color = "#ff8000";
}
function out(){
this.style.color = "#804000";
}
}
function parrafo(){
var pElems = document.getElementsByTagName("P");
for(var i=0;i<pElems.length;i++){
pElems[i].onmouseover = over2;
pElems[i].onmouseout = out2;
}
function over2(){
this.style.backgroundColor = "#ffff00";
}
function out2(){
this.style.backgroundColor = '';
}
}

</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: 15 de Abril 2017, 20:22 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript. Eventos, manejador(event handler). CU01157E
« Respuesta #1 en: 18 de Febrero 2017, 15:40 »
Buenas JuansT.

El aparatado "a" habla de que tienes que afectar a  las etiquetas h1 y h3 y según lo tienes solo afecta las etiquetas h1.

Saludos. ;D

JuansT

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 44
    • Ver Perfil
Re:JavaScript. Eventos, manejador(event handler). CU01157E
« Respuesta #2 en: 20 de Febrero 2017, 17:34 »
Gracias por la correción Pedro! faltaba recoger los elementos de h3 y asignarles los eventos, dejo el código:

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 type="text/javascript">

window.onload = function(){
h1AndH3();
parrafo();
}
function h1AndH3(){
var h1Elems = document.getElementsByTagName('h1');
var h3Elems = document.getElementsByTagName('h3');

for(var i=0;i<h1Elems.length;i++){
h1Elems[i].onmouseover = over;
h1Elems[i].onmouseout = out;
}
for(var i=0;i<h3Elems.length;i++){
h3Elems[i].onmouseover = over;
h3Elems[i].onmouseout = out;
}
function over(){
this.style.color = "#ff8000";
}
function out(){
this.style.color = "#804000";
}
}
function parrafo(){
var pElems = document.getElementsByTagName("P");
for(var i=0;i<pElems.length;i++){
pElems[i].onmouseover = over2;
pElems[i].onmouseout = out2;
}
function over2(){
this.style.backgroundColor = "#ffff00";
}
function out2(){
this.style.backgroundColor = '';
}
}

</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: 15 de Abril 2017, 20:21 por Ogramar »

 

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".