Scribd
Cargar
7 vistas

CHTML B Ejercicio RolloverJavaScript

Cargado por

aye.trigo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
7 vistas

CHTML B Ejercicio RolloverJavaScript

Cargado por

aye.trigo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

Por el experto: Ing.

Ubaldo Acosta

www.gl obal mentoring.com .mx


Crear un proyecto con JavaScript para poner en práctica el
concepto de Rollover. Al finalizar veremos:

www.gl obal mentoring.com .mx


Creamos un nuevo proyecto:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo funciones.js:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo estilos.js:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo mejorado.html:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo resultado.html:

www.gl obal mentoring.com .mx


Descargamos las imágenes a utilizar dentro del proyecto:

http://icursos.net/cursos/HTML/Leccion08/RolloverJavaScript/boton_on.jpg

www.gl obal mentoring.com .mx


Descargamos las imágenes a utilizar dentro del proyecto:

http://icursos.net/cursos/HTML/Leccion08/RolloverJavaScript/boton_off.jpg

www.gl obal mentoring.com .mx


Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de Botones Rollover</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h1>Ejemplo de Botones Rollover</h1>

<a href="resultado.html"
onmouseover="document.boton.src = 'boton_on.jpg'"
onmouseout="document.boton.src = 'boton_off.jpg'">
<img src="boton_off.jpg" name="boton" alt="boton"/>
</a>

<br/>

<a href="mejorado.html">Ejemplo mejorado</a>


</body>
</html>
www.gl obal mentoring.com .mx
Archivo funciones.js:
window.onload = cargarImagenes;

function cargarImagenes() {
for (var i = 0; i < document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A") {
configuraRollover(document.images[i]);
}
}
}

function configuraRollover(imagen) {
imagen.imagenOff = new Image();
imagen.imagenOff.src = "boton_off.jpg";
imagen.onmouseout = cambiaOff;

imagen.imagenOn = new Image();


imagen.imagenOn.src = "boton_on.jpg";
imagen.onmouseover = cambiaOn;
}

www.gl obal mentoring.com .mx


( )
Archivo funciones.js:
/**
* 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() {
this.src = this.imagenOff.src;//tomamos los valores ya asociados
}

//Se asocio al evento onmouseover


function cambiaOn() {
this.src = this.imagenOn.src;//tomamos los valores ya asociados
}

www.gl obal mentoring.com .mx


Archivo estilos.css:
body {
background:#ffffff;
}

img{
border:none;
}

www.gl obal mentoring.com .mx


Archivo mejorado.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio Rollover Mejorado</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Ejercicio Rollover Mejorado</h1>
<a href="otro.html">
<img src="boton_off.jpg" alt="Boton Enviar" id="boton">
</a>
</body>
</html>

www.gl obal mentoring.com .mx


Archivo resultado.html:
<!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>

www.gl obal mentoring.com .mx


www.gl obal mentoring.com .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.

www.gl obal mentoring.com .mx


Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

También podría gustarte