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

Autor Tema: JavaScript evento mouseover mouseout cambiar una imagen al pasar ratón CU01159E#  (Leído 11962 veces)

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
JavaScript evento mouseover mouseout cambiar una imagen al pasar ratón CU01159E#
« en: 19 de Febrero 2016, 12:21 »
Para el primer ejercicio de la entrega CU01159E del tutorial JavaScript:

Citar
Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y una imagen. Utiliza los eventos onmouseover para que la imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratón sobre ella. Utiliza el evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer la imagen original.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document curso aprenderaprogramar.com</title>
<style>
    img {
        height: 400px;
        width: 400px;
    }   
</style>
<script>
window.onload = function(){
    var imagen = document.getElementById("imagen_web");
    imagen.addEventListener('mouseover',cambiarImagen);
    imagen.addEventListener('mouseout',imagenIniciar);
   
    function cambiarImagen(){
        this.setAttribute('src','https://image.shutterstock.com/display_pic_with_logo/3016328/368581601/stock-photo-computer-key-showing-the-word-html-368581601.jpg');   
    }
   
    function imagenIniciar(){
        this.setAttribute('src',"https://pixabay.com/static/uploads/photo/2014/07/07/10/22/html-386093__180.jpg");
    }
   
   
}   
   
</script>
</head>
<body>
    <h1>La web para aprender programacion</h1>
        <p>La programación Web, parte de las siglas WWW, que significan World Wide Web o telaraña mundial.</p>
        <p>En la programación Web, el HTML es el lenguaje que permite codificar o preparar documentos de hipertexto, que viene a ser el lenguaje comun para la construccion de una pagina Web.</p>
        <img id="imagen_web" src="https://pixabay.com/static/uploads/photo/2014/07/07/10/22/html-386093__180.jpg" />
</body>
</html>

Y para el segundo ejercicio

Citar
Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y un formulario con los campos nombre, apellidos, edad y correo electrónico, así como con botones enviar y cancelar. Utiliza el evento onsubmit y otras herramientas para impedir que se envíe el formulario si se produce alguna de estas circunstancias:

a) El nombre está vacío ó el correo electrónico está vacío.

b) El correo electrónico no contiene los símbolos @ (arroba) y . (punto). Por ejemplo juan arroba gmail.com no es un correo válido.

c) No existe al menos una letra precediendo el símbolo @ del correo electrónico y una letra después de este símbolo. Por ejemplo a@.com no es un correo válido.

d) No existen al menos dos letras después del punto en el correo electrónico. Por ejemplo juan@gmail.c no es un correo válido.

e) La edad es cero o menor de cero.

En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinámicamente) cuando el campo que tenía un problema tome el foco (para ello usa el evento onfocus).


El código es el siguiente:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document curso aprenderaprogramar.com</title>
<style type="text/css">
input {margin:10px;}
</style>
</head>
<script>

var nombreOk=false;
var apellidoOk=false;
var edadOk=false;
var emailOk=false;
     
window.onload=function(){
    var everyInputs=document.getElementsByTagName('input');
    for (var i=0;i<(everyInputs.length);i++){
        everyInputs[i].addEventListener('focus',estilo);
        everyInputs[i].addEventListener('blur',estilo2);
        var nodoname=everyInputs[i].name;
       
        switch (nodoname){
                case "nombre":
                    everyInputs[i].addEventListener('blur',validarNombre);
                    break;
                case "apellido":
                     everyInputs[i].addEventListener('blur',validarApellido);
                    break;
                case "edad":
                    everyInputs[i].addEventListener('blur',validarEdad);
                    break;
                case "email":
                    everyInputs[i].addEventListener('blur',validarEmail);
                    break;
                default :break;
            }
    }
function estilo(){
    this.style.backgroundColor="yellow";
}
function estilo2(inputElement){
    this.style.background='transparent';
    this.nextSibling.src="http://images.all-free-download.com/images/graphiclarge/tick_ok_sign_4190.jpg";
}
function estiloRojo(inElement){
    inElement.style.backgroundColor="red";
    inElement.nextSibling.src="http://griponclimate.files.wordpress.com/2013/03/wrong.png";
}
       
function validarNombre(){
        var nombre=document.getElementById("nombre");   
        var expresionRegular=/^\w{3,}$/;
        if ((expresionRegular.test(nombre.value))==true){
            nombreOk=true;
            estilo2(nombre);
        }
        else {
            nombreOk=false;
            estiloRojo(nombre);
        }
   
}

function validarApellido(){
        var apellido=document.getElementById("apellido");
        var expresionRegular=/^\w{3,}$/;
        if ((expresionRegular.test(apellido.value))==true){
            apellidoOk=true;
            estilo2(apellido);
        }
        else {
            apellidoOk=false;
            estiloRojo(apellido);
        }
   
}

function validarEdad(){
    var edad=document.getElementById("edad");
    if ((edad.value>10) && (edad.value<99)){
        edadOk=true;
        estilo2(edad);
    }
    else {
        edadOk=false;
        estiloRojo(edad);   
    }
   
}
   
function validarEmail(){
    var valorEmail=document.getElementById("email");
    var expresionRegular=/^([\w-\.]{3,}\@.+\..+)$/;
    var email=convertirMinusculas(valorEmail.value);
    email=comprobarAtEmail(email);
    if ((expresionRegular.test(email))==true) {
        emailOk=true;
        estilo2(valorEmail);
}
else {
        emailOk=false;
estiloRojo(valorEmail);   
}
   
}
   
 
function convertirMinusculas(email){
    return email.toLowerCase();   
    }
   
function comprobarAtEmail(email){
    var expresion=/\sat\s/g;
    return email.replace(expresion,'@');
}

    }
function validarDatos(){
    var msg='Los datos que debe rectificar son:';
    if (nombreOk && apellidoOk && edadOk && emailOk){
        alert ("Ha introducido todos los datos correctamente y su formulario va a ser enviado");
        return true;
    }else{
        if (nombreOk===false){
            msg = msg + ' nombre ';
        }
        if (apellidoOk===false){
            msg = msg + ' apellido ';
        }
        if (edadOk===false){
            msg = msg + ' edad ';
        }
        if (emailOk===false){
            msg = msg + ' email ';   
        }
        alert (msg);
        return false;
    }
}

</script>
<body>
    <h1>La web para aprender programacion</h1>
    <p>Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender ahora el significado de cada uno de ellos. Simplemente ten unas nociones básicas que te permitan resolver los retos que como programador te puedan ir surgiendo.</p>
    <p>Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.</p>
    <img id="img1" src="http://i.imgur.com/tq5Bs.png" />
<form name="miniformualario" class="formulario" method="get" onsubmit="return validarDatos()">
<label >Escriba nombre</label>   
<input type="text" id="nombre" name="nombre"/><img width="20" height="20"/><br/>
<label>apellidos</label>
<input type="text" id="apellido" name="apellido"/><img width="20" height="20"/><br/>
<label>edad</label>
<input type="text" id="edad" name="edad"/><img width="20" height="20"/><br/>
<label>Correo electronico</label>
<input type="text" id="email" name="email"/><img width="20" height="20"/><br/><br/>
<input type="submit"  value="Enviar" />
<input type="reset" value="Reiniciar datos" />   
   
</form>
<script>
       
   
</script>
</body>
</html>
« Última modificación: 21 de Febrero 2016, 18:08 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:JavaScript evento mouseover mouseout cambiar una imagen al pasar ratón CU01159E#
« Respuesta #1 en: 21 de Febrero 2016, 18:09 »
Hola!

El primer ejercicio perfecto

El segundo más que perfecto, te ha quedado genial y demuestra buen nivel de manejo de JavaScript (para quienes lo revisen, no se adapta exactamente al enunciado, el mensaje de advertencia serían las imágenes)

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com

Salvadoruve2

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Re:JavaScript evento mouseover mouseout cambiar una imagen al pasar ratón CU01159E#
« Respuesta #2 en: 25 de Agosto 2016, 17:03 »
Hola, esoty estudiando el ejercicio para comprender el código, y hay una parte que no entiendo.

En la parte del código correspondiente a:

Código: [Seleccionar]
function estiloRojo(inElement){
    inElement.style.backgroundColor="red";
    inElement.nextSibling.src="http://griponclimate.files.wordpress.com/2013/03/wrong.png";
}
       
function validarNombre(){
        var nombre=document.getElementById("nombre");   
        var expresionRegular=/^\w{3,}$/;
        if ((expresionRegular.test(nombre.value))==true){
            nombreOk=true;
            estilo2(nombre);
        }
        else {
            nombreOk=false;
            estiloRojo(nombre);
        }
   
}
Quisiera saber por que se utiliza el atributo inElement para hacer funcionar a la función "estiloRojo".
¿Por que no funciona con el atributo "this" (ejmp: "this.style.backgroundColor="red";")

En este otro apartado:

Código: [Seleccionar]
function estilo2(inputElement){
    this.style.background='transparent';
    this.nextSibling.src="http://images.all-free-download.com/images/graphiclarge/tick_ok_sign_4190.jpg";
}
La función "estilo2" se ejecuta con el atributo "this".

Estaría muy agradecido con una aclaración. Gracias
En línea
Dt. Crane psychiatrist

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:JavaScript evento mouseover mouseout cambiar una imagen al pasar ratón CU01159E#
« Respuesta #3 en: 28 de Agosto 2016, 22:11 »
Buenas, en la entrega this javascript: significados. Ambitos (scope). Anidamiento. namespaces. Ejemplo ejercicio resuelto (CU01168E) se explica que this puede tener distintos significados según el contexto en que se invoque y que se puede "perder el this". En cada punto en que invoques this tienes que comprobar que realmente equivalga a lo que tú esperas que sea this, en algunos casos puede ocurrir que tú creas que this equivale a algo que no es a lo que realmente equivale.

Una forma de comprobar qué es this es escribir alert("this es "+this);

this aqui es [object HTMLInputElement] nos indica que this es un nodo

this es [object Window] nos indica que this es el objeto global, al que no puedes aplicarle estilos CSS (esto solo puedes hacerlo con nodos HTML)

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