cómo hacer un efecto

causita · #1 (**permalink**) 13/04/2005, 19:08

hola, en una página ( http://www.zaimella.com/zaimella/productos.html ) vi un efecto q me interesa saber como se hace, es el de poner el mouse sobre los productos y sale la imagen del producto al lado y cambia según el producto donde coloques el puntero del mouse (sin necesdad de hacer click)...cual es el código para hacerlo, xq me gstaria implementarlo en una página q estoy haciendo.

grxs

El_derby · #2 (**permalink**) 13/04/2005, 20:41

eso tambien se hace en flash pero tienes que saber action script aunque tambien en el dreamweaver hay una opcion para que te salga eso insertar-imagen interactiva-overmouse

ahora bien si quieres hacer lo de esta manera que al pasar en un link salga la imagen en otra parte como en el ejemplo has esto

Código:

<html>
<head>
<script  language="JavaScript" type="text/javascript">
function writeLayer(layerID,txt){
   if(document.getElementById){
     document.getElementById(layerID).innerHTML=txt;
    }else if(document.all){
      document.all[layerID].innerHTML=txt;
    }else if(document.layers){
         with(document.layers[layerID].document){
                open();
                write(txt);
                close();
        }
    }
}
</script>
</head>
<body>
<div id="imagen">Acá erstara la imagen</div>
<a href="#" onmouseover="writeLayer('imagen','<img ....>')">clickeame</a>
</body>
</html>

causita · #3 (**permalink**) 13/04/2005, 21:09

pero en http://www.zaimella.com/zaimella/productos.html es diferente, la imagen aparece al lado derecho y el vinculo no cambia en nada...ese es el detalle

El_derby · #4 (**permalink**) 14/04/2005, 08:11

porque no usas el dreamweaver?

axy108 · #5 (**permalink**) 14/04/2005, 09:14

para eso deberias de usar un poco de DHTML, dime que tal andas en esos conocimientos para saber desde doinde te puedo empezar a explicar, y por cierto lo unico que hacen en esa pagina es aparecer y desaparecer capas y la verdad es muy sencillo pero dime que tal andan tus conocimientos en DHTML y te puedo poner un ejemplo sencillo.

saludos

axy108 · #6 (**permalink**) 14/04/2005, 09:33

Mira aqui te dejo un ejemplo estudialo y si tienes dudas solo pregunta ok?

Código HTML:

<html>
	<head>
		<title></title>
	<script language="JavaScript">
		function muestra_capa(capa){
			document.getElementById(capa).style.visibility = 'visible';
		}
		function oculta_capa(capa){
			document.getElementById(capa).style.visibility = 'hidden';
		}
	</script>
	</head>
	<body>
		<div style="top:100; left:100; position: absolute; height: 100; width: 100; visibility: hidden" id="capa1">
			<h2>Esta es la capa 1</h2>
		</div>
		<div style="top:100; left:100; position: absolute; height: 100; width: 100; visibility: hidden" id="capa2">
			<h2>Yo soy la capa 2</h2>
		</div>
		<a href="#" onmouseover="muestra_capa('capa1')" onmouseout="oculta_capa('capa1')">Ver capa 1</a><br>
		<a href="#" onmouseover="muestra_capa('capa2')" onmouseout="oculta_capa('capa2')">Ver capa 2</a>
	</body>
</html>

SALUDOS

tunait · #7 (**permalink**) 14/04/2005, 09:56

Tema trasladado al foro de javascript desde (x)html

causita · #8 (**permalink**) 14/04/2005, 17:38

TUNAIT, me asustaste!

crei q habian eliminado el post...

SUGERENCIA..creo q para estos casos hay q poner un aviso de "movido" o algo asi, xq los que desconocemos de algunos temas no sabemos a q foro corresponde nuestra inquietud (x ejemplo HTML, DHTML, Javascript, Java, ...) disculpen las molestias. gracias

AXY108, hola, en DHTML sé lo minimo (x no decir "casi nada") yo tenia el codigo para hacer ese efecto, lo saqué de un ejemplo q el DW traia, pero ahora no encuentro ese "ejemplo" ni el código q habia guardado...lo q necesito es cómo hacer ese efecto....mas tarde voy a probar tu ejemplo (estoy en la universidad ahorita) y t aviso.

Muxas gracias x tu ayuda

causita · #9 (**permalink**) 14/04/2005, 17:49

ya lo revisé!! muxas gracias....me sacaste del apuro..

salu2

tunait · #10 (**permalink**) 15/04/2005, 05:54

Cita:

Iniciado por causita

TUNAIT, me asustaste!

crei q habian eliminado el post...

SUGERENCIA..creo q para estos casos hay q poner un aviso de "movido" o algo asi, xq los que desconocemos de algunos temas no sabemos a q foro corresponde nuestra inquietud (x ejemplo HTML, DHTML, Javascript, Java, ...) disculpen las molestias. gracias

Ups, lamento el susto. Las redirecciones en el foro origen las dejamos en el caso de usuarios con poco tiempo y mensajes en los foros. En tu caso deduje que con el tiempo y cantidad de mensajes que llevas yá estarías al corriente de que los temas pueden ser movidos a otro foro y que puedes acceder a ellos directamente desde tu panel de control en Temas subscritos

Un saludo

axy108 · #11 (**permalink**) 15/04/2005, 06:04

Hola causita que bueno que te haya servido el ejemplo, una ultima recomendacion, y es que procures no usar los scripts que usa DW ya que son mas pesados y muchas veces no son compatibles con todos los navegadores, en este caso este ejemplo si lo es ademas que se supone que para hacer uso de esos scripts (los de DW) se debe de tener la liciencia :-p :-p :-p :-p pero bueno.

SALUDOS.

causita · #12 (**permalink**) 16/04/2005, 11:34

ok gracias, dime AXY y cómo haria para q no sean necesarias las coordenadas, es decir, para q la imagen aparezca en una celda específica, sin sobreponerse a las celdas aledañas.

axy108 · #13 (**permalink**) 18/04/2005, 07:04

bueno pues solamente tienes que campiar el vaolor del position por relative y quitar las coordenadas y de esa manera las capas ocuparan el espacio que tu le asignes en tu pagina aqui te dejo otro ejemplo

Código HTML:

<html>
	<head>
		<title></title>
	<script language="JavaScript">
		function muestra_capa(capa){
			document.getElementById(capa).style.visibility = 'visible';
		}
		function oculta_capa(capa){
			document.getElementById(capa).style.visibility = 'hidden';
		}
	</script>
	</head>
	<body>
		<a href="#" onmouseover="muestra_capa('capa1')" onmouseout="oculta_capa('capa1')">Ver capa 1</a><br>
		<a href="#" onmouseover="muestra_capa('capa2')" onmouseout="oculta_capa('capa2')">Ver capa 2</a>
	<div style="position: relative; height: 100; width: 100; visibility: hidden" id="capa1">
			<h2>Esta es la capa 1</h2>
		</div>
		<div style=" position: relative; height: 100; width: 100; visibility: hidden" id="capa2">
			<h2>Yo soy la capa 2</h2>
		</div>
	</body>
</html>

SALUDOS