condicion de imagen

pez · #1 (**permalink**) 09/07/2003, 14:36

Hola

Amigos de Foros del web

Quisiera saber si alguien tiene una condicion en el cual cuando el usuario pase el cursor por una imagen a lado de ella aparesca otra.

saludos

Bravenap · #2 (**permalink**) 09/07/2003, 14:49

Mira a ver si esta FAQ te sirve. Esta sería una opción, otra sería usar capas (otra FAQ) conteniendo imágenes.

Un saludo.

pez · #3 (**permalink**) 09/07/2003, 19:29

perdon

pero nada que ver

lo que necesito es que cunado tu pases el puntero sobre una imagen alado aparesca otra

como la siguiente web

http://www.unitec.mx

saludos

JavierB · #4 (**permalink**) 10/07/2003, 01:43

Hola, pez:

¿Te refieres a esto?

Código PHP:

  <html> 
 
<head> 
</head> 
 
<body> 
<img src="imagen1.gif" 
onmouseover="document.getElementById('im').style.visibility='visible'" 
onmouseout="document.getElementById('im').style.visibility='hidden'"> 
<img id="im" src="imagen2.gif" style="visibility:hidden"> 
</body> 
 
</html>

Saludos,

Bravenap · #5 (**permalink**) 10/07/2003, 15:42

Hola pez. Hombre ¿nada que ver, nada que ver...? No sé yo...

Evidentemente la opción de JavierB (

) es válida pero de alguna manera el ocultar y mostrar capas te permite colocarlas donde quieras sin el inconveniente de que ocupen espacio y desplacen a otros objetos. Podrías tener todas las imágenes que quisieras unas encima de otras y de distintos tamaños y mostrar la que corresponda cada vez.

Además, la primera FAQ que te recomendé (106) hace precisamente lo que quieres, sólo que en lugar de pasar por encima de una imagen para cambiar otra pasa por encima de un texto. No hay más que cambiar el evento onMouseOver del texto a la imagen.

Para más datos, en el enlace que has puesto de ejemplo, te viene el código que utilizan para hacer esos cambios, que no es más que el SwapImage de Dreamweaver. Te bastaría con estudiar un poco la página para adapatarlos a tu necesidad.

Aquí te dejo parte de ese código:

Código:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Un saludo.