Ayuda con CUADRO DE IMAGENES

[marbelgrafic]

Hola a todos:
Novato al habla... je je. Alguien me puede orientar, ayudar o indicarme un tutorial donde pueda hacer lo que se muestra en el siguiente enlace?:

http://www.axelrodarchitects.com/commercial/HTML/commercial_1.php

Lo que me interesa es saber hacer eso de que cuando pasas el mouse por los cuadrados de la izquierda (que estan difuminados) se ven en color verdadero y aparece la imagen en el lado derecho.

Alguien que me pueda ayudar???

Muchas gracias.

[jimmy.villalobos]

Hola

Lo que hacen en este caso es que el que tiene el color como difuso ess una imagen igual a la que se muestra

yu por medio de javascript estan intercambiando el src entre la imagen difusa y la que no
Este es el coddigo de la pagina
<div id="thumbnail_2">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/0.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/0.jpg" id="0">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/1.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/1.jpg" id="1">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/2.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/2.jpg" id="2">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/3.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/3.jpg" id="3">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/4.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/4.jpg" id="4">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/5.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/5.jpg" id="5">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/6.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/6.jpg" id="6">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/7.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/7.jpg" id="7">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/8.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/8.jpg" id="8">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/9.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/9.jpg" id="9">
</div>

Y esta function de javascript cambia la iamgen grande

function replace_with_dark_image(id, dir) {
document.getElementById('main_wide_photo').style.d isplay = 'none'
document.getElementById('main_photo').style.displa y = 'block'
document.getElementById(id).src = dir + '/images/thumnails_top/' + id + '.jpg';
document.getElementById('photo').src = dir + '/images/big_images/' + id + '.jpg'
}

espero que te sirva

[Bandit]

Hola marbelgrafic:
Bienvenido al Foro:
Ese efecto es muy simple de hacerlos:
Crea un MC y en la capa 1 frame 1 coloca la imagen y en el frame 2 crea un fotograma clave, seleccionas la imagen del frame 1 y lo conviertes en MC y le das como alfa=30.
Crea la capa 2 y en el primer frame coloca un stop();
En el escenario pon el MC que contiene las imágenes y en el Panel de acciones escribe éste código:

Código actionscript:

on(rollOver){
 gotoAndStop(2); 
}
on(rollOut){
 gotoAndStop(1);
}
 

Espero haberte sido de ayuda y Feliz Navidad.

[lucasiramos]

Bueno, resumiendo un poquito lo que dicen los compañeros, que te han dado dos opciones valederas pero distintas, te comento que lo que vos estas mirando en esa página no es Flash, sino HTML y Javascript. Para eso podes buscar imagenes de sustitución en Google, que vas a tener varios ejemplos para mirar. Este esta bueno, pero la idea es que sigas leyendo según tus necesidades.

También se puede hacer en Flash, podes buscar Animación en efecto RollOver en Flash, y también vas a tener para leer un rato. Este tutorial de Cristalab esta bueno, seguro que te sirve, pero igualmente podes seguir leyendo a gusto.

Saludos!

[marbelgrafic]

Muchisimas gracias a todos!!!
Intentaré hacer los diferentes ejemplos para ver cual me va mejor.

Thanks again.

[marbelgrafic]

Iniciado por Bandit

Hola marbelgrafic:
Bienvenido al Foro:
Ese efecto es muy simple de hacerlos:
Crea un MC y en la capa 1 frame 1 coloca la imagen y en el frame 2 crea un fotograma clave, seleccionas la imagen del frame 1 y lo conviertes en MC y le das como alfa=30.
Crea la capa 2 y en el primer frame coloca un stop();
En el escenario pon el MC que contiene las imágenes y en el Panel de acciones escribe éste código:

Código actionscript:

on(rollOver){
 gotoAndStop(2); 
}
on(rollOut){
 gotoAndStop(1);
}
 

Espero haberte sido de ayuda y Feliz Navidad.

Antes de nada muchas gracias por responder, pero tengo el siguiente probblema:
Cuando meto estos codigos que me has dado, solo me reconoce el primero de ellos, es decir el rollover, despues no vuelve al frame 1. Si pongo el rollout como primer codigo solo vuelve al frame 1 pewro al pasar por encima no va al 2.

Algo hay que no esta bien, como hacer para que salgan los dos?

Te puedo enviar el flash si quieres chequearlo... me harias un favor Bandit.

Muchas gracias.

[fletcher2009]

Yo hice un código parecido para AS3. Con la diferencia de que cree 2 funciones para cuando el mouse está encima o afuera de la imagen

Este es el código:

Código AS3:

silla.addEventListener(MouseEvent.ROLL_OVER, claro);
silla.addEventListener(MouseEvent.ROLL_OUT, oscuro);
 
function claro(event:MouseEvent){
    gotoAndStop("2");
    
}
 
 
function oscuro(event:MouseEvent){
    gotoAndStop("1");
    
    
}
 

Aqui está el fla si lo quieren descargar

http://ifile.it/a0dmvju/EFECTO%20LUZ%20%20AS3.fla