« anterior próximo »
Páginas: [1]

Autor Tema: JavaScript Eventos onmouseover y onmouseout event handler control ratón CU01157E  (Leído 2108 veces)

Pepote21

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 92
    • Ver Perfil
JavaScript Eventos onmouseover y onmouseout event handler control ratón CU01157E
« en: 07 de Junio 2017, 16:31 »
Hola a todos. Os dejo mi código del ejercicio CU01157E del curso básico de programación web con JavaScript usando Notepad++ como editor.

Gracias. Un saludo.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">   
            function colorText(elemento,c){
   elemento.style.color=c;
   
}
function colorFondo(elemento,c){
    elemento.style.backgroundColor=c;
}


        </script>
    </head>
    <body>
    <p onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')"><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
        <h1 onmouseover="colorText(this,'#FF9900')" onmouseout="colorText(this,'#993333')">Novedades</h1>
        <p style="display:inline-block;" onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')">Aquí presentamos las novedades del sitio.</p>
        <h3 onmouseover="colorText(this,'#FF9900')" onmouseout="colorText(this,'#993333')">Lanzamos el producto X-FASHION</h3>
        <p style="display:inline-block;" onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')">Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
        <p onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')"><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
        <h3 onmouseover="colorText(this,'#FF9900')" onmouseout="colorText(this,'#993333')">Mejoramos el producto T-MOTION</h3>
        <p style="display:inline-block;" onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')">Hemos lanzado una nueva versión del producto T-MOTION</p>
        <p onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')"><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
    </body>
</html>
« Última modificación: 27 de Junio 2017, 18:35 por Ogramar »
En línea

Pepote21

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 92
    • Ver Perfil
Re:JavaScript Eventos, event handler. Ejercicio CU01157E
« Respuesta #1 en: 13 de Junio 2017, 13:57 »
Hola. Estoy repasando los eventos y rectifico el ejrcicio anterior.
Un saludo

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(){
function cambiarColorText(){
    this.style.color='orange';
}
function restaurarColorText(){
    this.style.color='brown';
}
function cambiarColorFondo(){
    this.style.backgroundColor='yellow';
}
function restaurarColorFondo(){
    this.style.backgroundColor='';
}
var nodoH=document.querySelectorAll('h1,h3');
for (var i=0; i<nodoH.length; i++){
    nodoH[i].onmouseover=cambiarColorText;
nodoH[i].onmouseout=restaurarColorText;
}
var nodoP=document.getElementsByTagName('p');
for (var i=0; i<nodoP.length; i++){
    nodoP[i].onmouseover=cambiarColorFondo;
nodoP[i].onmouseout=restaurarColorFondo;
}
}
</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: 27 de Junio 2017, 18:38 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:JavaScript Eventos onmouseover y onmouseout event handler control ratón CU01157E
« Respuesta #2 en: 27 de Junio 2017, 18:37 »
Buenas Pepote21, todo correcto

Salu2
En línea
Páginas: [1]
« anterior próximo »
 

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