Embedded Files
Eventos: ondblclick, onmouseover, onmouseout
Los eventos ondblclick, onmouseover y onmouseout son parecidos al onclick que vimos en actividades anteriores. Estos eventos se asignan de manera similar: se les asigna una función que se ejecuta cuando ocurre la acción correspondiente. Por ejemplo, ondblclick se activa cuando haces doble clic en un elemento, onmouseover cuando pasas el mouse por encima de algo, y onmouseout cuando quitas el mouse de ese elemento. Todos ellos hacen que las páginas web respondan de diferentes maneras según cómo interactúes con el ratón.
ondblclick (doble clic):
Este evento sucede cuando haces dos clics rápidos en un elemento html, como un botón, imagen entre otros. Es parecido a cuando haces doble clic para abrir algo en la computadora.
onmouseover (pasar el ratón por encima):
Este evento ocurre cuando pones el cursor del ratón sobre un elemento html, como cuando pasas el mouse sobre un botón o una imagen sin hacer clic. Es como pasar tu mano por encima de algo sin tocarlo.
onmouseout (quitar el ratón de encima):
Este evento se activa cuando retiras el cursor del ratón de un elemento html, es decir, cuando mueves el mouse fuera de algo que antes estabas señalando.
Ejemplos:
<html>
<head>
<title>Ejemplo onclick</title>
</head>
<body>
<b id="id1" ondblclick="f1()" onmouseover="f2()" onmouseout="f3()" >Elemento1</b>
<u ondblclick="f1()">Realizar doble clic</u>
<i onmouseover="f2()" >Pasar por aquí</i>
<b onmouseout="f3()" onmouseout="f3()" >Pasar por aquí y salir</b>
<script>
var elem1=document.getElementById("id1");
var estilo1 = "color:darkslategray;background:lightblue";
var estilo2 = "color:white;background:midnightblue";
var estilo3 = "color:gold;background:darkred";
elem1.style=estilo3;
function f1() {
elem1.textContent="Realizó doble clic";
elem1.style=estilo1;
}
function f2() {
elem1.textContent="Puso el cursor";
elem1.style=estilo2;
}
function f3() {
elem1.textContent="Quitó el cursor";
elem1.style=estilo3;
}
</script>
</body>
</html>
Actividad 3.7A
Crea una nueva página HTML como el ejemplo anterior con el nombre "Act37A".
Dentro de la etiqueta <body>, agrega el siguientes elemento:
<h1 id="id1" onclick="f1()" >JAG</h1>
<img id="id2" src="https://acortar.link/GDcjdu" width="40" height="80" onclick="f2()">
<button id="id3" onclick="f3()" >boton1</button>
<button id="id4" onclick="f4()" >boton2</button>
Dentro de la etiqueta <script>, crear:
Las variables elem1, elem2, elem3, y elem4 que guarden las referencias a elementos HTML específicos usando document.getElementById("idetificador"). Esto te permite acceder y modificar esos elementos desde JavaScript.
var elem1=document.getElementById("id1");
var elem2=document.getElementById("id2");
var elem3=document.getElementById("id3");
var elem4=document.getElementById("id4");
Las variables estilo1 y estilo2 que guarden las cadenas de texto con estilos CSS. Estos se aplican a los elementos cuando los llamas con .style.
var estilo1 = "color:lightyellow;background:brown;font-size:14";
var estilo2 = "color:lightgray;background:black;font-size:20";
La función f1() que solicite al usuario que ingrese un nuevo texto mediante prompt(), luego actualiza el contenido del encabezado <h1> con ese texto y aplica el estilo definido en estilo1 tanto al <h1> como a los botones boton1 y boton2.
function f1() {
var texto1=prompt("Escriba el Titulo:");
elem1.textContent=texto1;
elem1.style=estilo1;
elem3.style=estilo1;
elem4.style=estilo1;
}
La función f2() aplica el estilo definido en estilo2 al encabezado <h1> (elem1) y a los botones boton1 (elem3) y boton2 (elem4), cambiando su color, fondo y tamaño de fuente según lo especificado en esa variable.
function f2() {
elem1.style=estilo2;
elem3.style=estilo2;
elem4.style=estilo2;
}
La función f3()cambia el tamaño de la imagen (elem2) al modificar sus propiedades width (ancho) y height (alto), estableciéndolas en 200 píxeles cada una. Esto agranda la imagen cuando se ejecuta la función.
function f3() {
elem2.width = 200;
elem2.height = 200;
}
La función f4()modifica el tamaño de la imagen (elem2) al establecer sus propiedades width (ancho) y height (alto) en 400 píxeles cada una, lo que hace que la imagen sea más grande cuando se ejecuta la función.
function f4() {
elem2.width = 400;
elem2.height = 400;
}
Actividad 3.6B
En esta actividad, crearás una página web que permite al usuario interactuar con una imagen mediante botones. Podrán cambiar el tamaño de la imagen a 200x200 o 400x400 píxeles y alternar entre dos imágenes diferentes usando enlaces específicos. Esta práctica ayudará a los estudiantes a entender cómo usar HTML y JavaScript para crear interactividad en una página web.
Crea una nueva página HTML con el nombre "Act36B". Dentro de la etiqueta <body>, agrega los siguientes elementos:
<h1>Imagen</h1>
<img id="id1" src="https://i.gifer.com/MQBP.gif" width="200" height="200">
<button onclick="cambiarTamanio1()">Boton Tamaño 1</button>
<button onclick="cambiarTamanio2()">Boton Tamaño 2</button>
<button onclick="cambiarImagen1()">Cambiar Imagen 1</button>
<button onclick="cambiarImagen2()">Cambiar Imagen 2</button>
Dentro de la etiqueta <script>, crear las siguientes variables y funciones:
Variable que guarde la referencia al elemento HTML imagen.
var elem1 = document.getElementById("id1");
Función para cambiar el tamaño de la imagen (200x200)
function cambiarTamanio1() {
elem1.width = 200;
elem1.height = 200;
}
Función para cambiar el tamaño de la imagen (400x400)
function cambiarTamanio2() {
elem1.width = 400;
elem1.height = 400;
}
Función para cambiar la imagen a la primera URL
function cambiarImagen1() {
elem1.src = "https://acortar.link/X1VIZi";
}
Función para cambiar la imagen a la segunda URL
function cambiarImagen2() {
elem1.src = "https://acortar.link/lnyqWL";
}
Page updated
Report abuse