Por el experto: Ing.
Ubaldo Acosta
[Link] obal [Link] .mx
Crear un proyecto con JavaScript para poner en práctica el
concepto de Rollover. Al finalizar veremos:
[Link] obal [Link] .mx
Creamos un nuevo proyecto:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Descargamos las imágenes a utilizar dentro del proyecto:
[Link]
[Link] obal [Link] .mx
Descargamos las imágenes a utilizar dentro del proyecto:
[Link]
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de Botones Rollover</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Ejemplo de Botones Rollover</h1>
<a href="[Link]"
onmouseover="[Link] = 'boton_on.jpg'"
onmouseout="[Link] = 'boton_off.jpg'">
<img src="boton_off.jpg" name="boton" alt="boton"/>
</a>
<br/>
<a href="[Link]">Ejemplo mejorado</a>
</body>
</html>
[Link] obal [Link] .mx
Archivo [Link]:
[Link] = cargarImagenes;
function cargarImagenes() {
for (var i = 0; i < [Link]; i++) {
if ([Link][i].[Link] == "A") {
configuraRollover([Link][i]);
}
}
}
function configuraRollover(imagen) {
[Link] = new Image();
[Link] = "boton_off.jpg";
[Link] = cambiaOff;
[Link] = new Image();
[Link] = "boton_on.jpg";
[Link] = cambiaOn;
}
[Link] obal [Link] .mx
( )
Archivo [Link]:
/**
* Estas funciones se ejecutan segun el evento que se dispare
* pero no es al iniciar la pagina, sino dependen del
* boton que se presione, son conocidas como handlers
*/
//Se asocio al evento onmouseout
function cambiaOff() {
[Link] = [Link];//tomamos los valores ya asociados
}
//Se asocio al evento onmouseover
function cambiaOn() {
[Link] = [Link];//tomamos los valores ya asociados
}
[Link] obal [Link] .mx
Archivo [Link]:
body {
background:#ffffff;
}
img{
border:none;
}
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio Rollover Mejorado</title>
<link rel="stylesheet" type="text/css" href="[Link]">
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<h1>Ejercicio Rollover Mejorado</h1>
<a href="[Link]">
<img src="boton_off.jpg" alt="Boton Enviar" id="boton">
</a>
</body>
</html>
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Otro HTML</title>
</head>
<body>
<h1>Este es el resultado de presionar el boton de Enviar</h1>
</body>
</html>
[Link] obal [Link] .mx
[Link] obal [Link] .mx
Con este ejercicio hemos puesto en práctica el concepto de
Rollover, y con esto podemos agregarlo a cualquier de nuestros
formularios html.
Vimos dos ejemplos, uno utilizando directamente los eventos
de html y otro ocultando más el código y agregando funciones
de JavaScript para administrar el cambio de imágenes.
[Link] obal [Link] .mx
Por: Ing. Ubaldo Acosta
[Link] obal [Link] .mx