FORO
CONTACTO
anterior siguiente
JAVASCRIPT: PRELECTURA DE IMÁGENES

Si vas a añadir efectos de MouseOver a tu página web, lo mejor es que precargues el segundo conjunto de imagenes primero, para que la reacción del MouseOver sea instantánea. Aquí hay cuatro métodos de precarga de imagenes. Cada uno tiene un propósito.

METODO UNO:

El primer método es el más sencillo y se hace rápidamente. todo lo que tienes que hacer es insertar tus imagenes al final de la página con el ancho (width), y alto (height) a 1 pixel. Esto precarga tus imágenes, pero se nota un poco los pixeles al final de la imagen.

 

<IMG SRC="image1.gif" height=1 width=1 border=0>
<IMG SRC="image2.gif" height=1 width=1 border=0>
<IMG SRC="image3.gif" height=1 width=1 border=0>
<IMG SRC="image4.gif" height=1 width=1 border=0>
<IMG SRC="image5.gif" height=1 width=1 border=0>
etc.

MÉTODO DOS:

Este es un poco mejor. Tus imagenes son cargadas en memoria, pero no se ven en la página. Esto permite cargar tantas imagenes como quieras sin conocimiento del visor. Simplemente por la trayectoria/nombre de las imágenes en el nuevo array de imagenes que se establece en el código. Cada imagen acaba en una coma, excepto la última.

Here is another method that is a little bit better to use. Your images are loaded into memory, but are not seen on the page. This allows you to load as many images as you want to without the viewer knowing. Simply put the path/name of the images in the new array of images and you are set. Each image ends with a comma except the last image.

<script language="javascript">
<!--  precarga de imágenes para todos los navegadores

var imglist = new Array (
"iface/a_aaa.gif",
"iface/a_bvt.gif",
"iface/a_email.gif",
"iface/a_fimages.gif",
"iface/a_links.gif",
"iface/a_misc.gif"
);
var imgs = new Array();

var count;
if (document.images)
 for (count=0; count<imglist.length; count++)
  {imgs[count]=new Image(); imgs[count].src=imglist[count];}
}

// -->
</script>

El siguiente script es lo mismo que el anterior, pero este comprueba si tu navegador es compatible con el evento mouseover (NN3, NN4, IE4). Si lo es, entonces precarga las imágenes. Si no, se salta completamente la precarga y nos ahorramos en tiempo de descarga.

 

<script language="javascript">
<!--  Precarga imágenes de mouse over en navegadores compatibles
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion); 

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true';}
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) { roll = 'true'; }
else { roll = 'false'; }

if (roll == 'true') 
{
var imglist = new Array (
"iface/a_aaa.gif",
"iface/a_bvt.gif",
"iface/a_email.gif",
"iface/a_fimages.gif",
"iface/a_links.gif",
"iface/a_misc.gif"
);
var imgs = new Array();

var count;
if (document.images)
 for (count=0; count<imglist.length; count++)
  {imgs[count]=new Image(); imgs[count].src=imglist[count];}
}

// -->
</script>

MÉTODO TRES:

Este método precarga cada imagen (tanto la activa como la desactiva) y asigna a cada imagen un nombre de variable. Entonces, cuando se llama al script de mouseover, se carga la variable imagen. Para cada imagen necestarás tener una línea de código imageXon e imageXoff.

 

<script>
<!-- Script de preload de imágen

if (document.images) {

  image1on = new Image();  image1on.src = "images/b_home2.gif";  
  image2on = new Image();  image2on.src = "images/b_req2.gif";  
  image3on = new Image();  image3on.src = "images/b_office2.gif";
  image4on = new Image();  image4on.src = "images/b_about2.gif";
  
  image1off = new Image();  image1off.src = "images/b_home1.gif";  
  image2off = new Image();  image2off.src = "images/b_req1.gif";  
  image3off = new Image();  image3off.src = "images/b_office1.gif";
  image4off = new Image();  image4off.src = "images/b_about1.gif";

}

function turnOn(imageName) {
  if (document.images) {
    document[imageName].src = eval(imageName + "on.src");
  }
}

function turnOff(imageName) {
  if (document.images) {
    document[imageName].src = eval(imageName + "off.src");
  }
}

// -->
</script>

Y este es el código que debes añadir a tu imagen en tu página web:

<a href="home.htm" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')">
<img name="image1" src="images/b_home1.gif" alt="Home" width=145 height=35 border=0></a>


 

Autor: Javier Marco

anterior siguiente
 

Novedades

Realidad Virtual
Quest 3D
Modelado 3D
Iluminación Giles
Conway's Game of Life

Stereoscopía
Foto 3D

Internet
HTML
Dreamweaver
JavaScript
ASP

 

 
Hagaloustedmismo
Contacte en : hagaloustedmismo@wanadoo.es
Phohibida toda reproducción total o parcial sin permiso del autor