cambiar una imagen por otra al hacer clic

Citar

Escrito el 24 Sep 2006 04:30 pm

hola como estan... entre a trabajar a una empresa y le estoy arreglando su pagina web y me encontre con el siguiente problema...

en la seccion de productos se muestran muchas pequeñas imagenes de los productos y al hacer clic sobre una imagen se muestra una vista previa mas grandecita la cual se carga sobre una imagen del logo. y no se como hacer eso.

el detalle es el siguiente por ejemplo

tengo dos imagenes... imagen A e imagen B... al hacer clic en imagen A.... entonces.. imagen B cambia por imagen C

como hago eso en html? o cual es el codigo? he estado analizando el codigo de la pagina y no lo entiendo.

:crap:

o mejor diseño esa parte en flash

... si no resivo respuesta no me keda otra salida

Por LordGraphic3

84 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

desde?

Citar

Escrito el 25 Sep 2006 03:26 pm

Si sabes hacerlo en flash, lo mas facil es que lo hagas en flash. Sino puedes hacerlo en Javascript, consiste en tener una imagen contenedora y cambiar los valores del src por el href del enlace cada que se de click. No es dificil, pero en este momento no tengo tiempo para responder con código. Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 25 Sep 2006 04:33 pm

solo es una idea

Imagen.js

Código :

var image    =   new Image();
var Images   =   new Array('1.jpg','2.jpg','3.jpg');


function change(target)
{
   from       =   (document.images[target].src).lastIndexOf("/")+1;
   imageName    =   (document.images[target].src).substring(from,(document.images[target].src).length);
   current    =   IndexOf(Images,imageName);
   if (current+1 == Images.length)
   {
      current   =   0;
   }
   else
   {
      current++;
   }
   image.src    =   Images[current];
   document.images[target].src = image.src;
}

function IndexOf (haystack,needle)
{
   if (!isIE()) // IE don't supported indexOf because SUCKS!
   {
      return haystack.indexOf(needle);
   }
   var total   =   haystack.length;
   for ( i=0 ; i< total ; i++ )
   {
      if (haystack[i] == needle)
      {
         return i;
      }
   }
   return -1;
}

function isIE()
{
    var userAgent   =   navigator.userAgent.toLowerCase();
    return (document.all && userAgent.indexOf('msie')!=-1);
}

codigo html

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
   </head>
   <script language="JavaScript" src="images.js"></script>
   <body>
      <img src="1.jpg" name="Imagen" onclick="change('Imagen');"  />
   </body>
</html>

Aqui en este ejemplo todos los archivos estan en el mismo directorio, asi que queda de parte tuya mejorarlo y adaptarlos a tus necesidades.

saludos

Por Maikel

BOFH