Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes IV

Transiciones I

Definición de transiciones

Se llaman transiciones a los efectos pue se pueden producir en el cambio de imagen o diapositiva en una presentación. Si el cambio se produce de manera instantánea, sin nungún efecto, se dice que no hay transición. Sin embargo podemos hacer que las imágenes cambien de forma progresiva, de manera que vemos cómo una imagen entra en la pantalla, mientras la otra sale de ella.

Podemos hacer varios tipos de transiciones:

En este ejercicio veremos cómo realizar estos tipos de transicion de imágenes con javascript.


Planteamiento del ejercicio:

Realizaremos una página con un visor de imágenes las cuales van cambiando automáticamente cada cierto número de segundos. En la página pondremos también un menú que permitirá cambiar el tipo de transición que se realiza entre las imágenes. Las imágenes deben cambiar según el tipo de menú indicado.

En el siguiente enlace mostramos la página ya terminada, tal como debe quedar al final del ejercicio:

Transiciones terminado.



Imágenes que utilizamos

Utilizaremos las mismas imágenes usadas en el ejercicio anterior: "foto1.jpg", "foto2.jpg", ... "foto8.jpg".

1. India - Agra - El Taj Majal. 2. Albania - Region de Ballsh. 3. Atenas- Partenón. 4. Bélgica - Amberes. 5. Costa Rica - Parque nacional de la Amistad. 6. Egipto - Templo de Abu Simbel. 7. España - Albacete ciudad. 8. España - Tarragona - Acueducto romano.

Si quieres seguir el ejercicio con nosotros crea una carpeta nueva para esta página y copia allí estas imágenes.


Página base

Empezaremos por crear el código HTML y CSS de la página. Empezaremos por el codigo HTML: archivo transiciones.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Transiciones</title> 
<link rel="stylesheet" type="text/css" href="transiciones.css" />
<script type="text/css" src="transiciones.js"></script>
</head>
<body>
<h1>Transición de imágenes</h1>
<div id="menu">
  <h3>Tipos de transición</h3>
  <ul>
    <li onclick="modo='0';activar()">Sin transición.</li>
    <li onclick="modo='1';activar()">de derecha a izquierda</li>
    <li onclick="modo='2';activar()">de izquierda a derecha</li>
    <li onclick="modo='3';activar()">de arriba a abajo</li>
    <li onclick="modo='4';activar()">de abajo a arriba</li>
    <li onclick="modo='5';activar()">Transparencia</li>
    <li onclick="modo='6';activar()">pequeño a grande</li>
    <li onclick="modo='7';activar()">grande a pequeño</li>
  </ul>
</div>
<div id="visor">
  <div id="saliente">
    <img src="foto1.jpg" width="400" name="fotoSaliente" />
    <div id="tituloSaliente">1. India - Agra - El Taj Majal.
    </div>
  </div>
  <div id="entrante">
     <img src="foto2.jpg" width="400" name="fotoEntrante" />
     <div id="tituloEntrante">2. Albania - Region de Ballsh.
     </div>
  </div>
</div>
<div id="prueba">Sin Transición.
</div>
</body>
</html>

En el código de la página hemos preparado ya varias cosas:

Si visionamos la página anterior tal como está, veremos una serie de elementos uno debajo de otro con un cierto desorden. Es por eso que necesitamos crear el código CSS en el cual daremos forma a la página y estilo a los textos y otros elementos. Este es el código CSS: archivo transiciones.css.

* { margin: auto; padding: 0px; }
h1 { font: bold 1.5em garamond arial; text-align: center; padding: 0.2em;}
h3 { font: bold 1.2em garamond arial; padding: 0.2em 1em }
#menu { position: absolute; left: 0px; top: 0px; width: 150px; 
        height: 500px; background-color: #e3f2ff;  }
#menu li { padding: 0.2em 1em ; font: normal 0.9em arial; cursor: pointer;}
#visor { position: absolute; left: 300px; top: 80px; width: 400px; 
         height: 340px; background-color: silver; overflow: hidden; 
         text-align: center;  }
#visor img { width: 400px; }
#saliente { position: absolute; top: 0px; left: 0px; text-align: center; }
#entrante { position: absolute; top: 0px; left: 400px; text-align: center;}
#tituloSaliente { position: absolute; top: 310px; left: 50px; 
                  font: normal 0.9em arial; }
#tituloEntrante { position: absolute; top: 310px; left: 50px; 
                  font: normal 0.9em arial; }
#prueba { position: absolute; top: 450px; left: 200px; 
          font: normal 0.9em arial }

En el código CSS hemos posicionado los distntos elementos que conforman la página, además de decidir el tipo de letra y otras características del estilo.

Especial importancia tiene para el correcto visionado de la página la propiedad overflow: hidden dentro del selector #visor. Con esta propiedad vemos sólo la parte de las imágenes y títulos que están dentro de la pantalla, de manera que todo lo que está fuera se descarta. De esta manera podemos hacer aparecer y desaparecer las imágenes progresivamente dentro de la pantalla.

Por otra parte la propiedad cursor: pointer referida a los elementos de la lista de transiciones hace que el cursor cambie de aspecto al pasar por encima de éstos elementos. De esta manera el usuario ve que es en estos elementos donde tiene que pulsar.





En la siguiente página seguiremos con este ejercicio, e iniciaremos el código javascript:

Transiciones II.



Imágenes en prácticas js.

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com