como hacer este efecto...

[karen1986]

Hola espero alguien pueda ayudarm, quiero hacer algo como lo q viene en el link q les dejo ... donde vienen las ofertas que al poner el mouse se deslizan las imagenes, supongo yo que debe haber ya una aplicacion para que se pongan las imagenes que uno desea, pero igual si saben como hacer espero puedann explicarme... gracias


http://www.suempresa.com/dominio/inicio.php

[masterojitos]

la pagina http://www.suempresa.com/dominio/inicio.php
usa esta libreria: http://netweblogic.com/demos/phatfusion/imagemenu/

pero yo te recomiendo usarla con jquery.
web: http://www.alohatechsupport.net/webd...th_jquery.html
ejemplo: http://www.alohatechsupport.net/exam...ge-menu-2.html

Suerte

[karen1986]

gracias por los links y disculpa mi ignorancia pero mmmmmm... como lo agrego a mi pagina??? la hacen en joomla... yo entrego los archivos y ellos los ponen en la pagina asi q no tengo idea como hacerlo ,,, espero puedan ayudarmee me urge !!! gracias

[karen1986]

una preguntaa... como hago para q se recorran mis imagenes.... en los ejemplos q me das e puesto las imagenes q yo quiero el tamaño que ahora es de 900 px de ancho por 500 pixeles de alto.... y ya queda, pero al momento de pasar ek cursor sobre la imagen no se recorre lo suficiente y no encuentro en donde cambiar esos valores...
asi a quedado el codigo.... en q parte debo cambiarlo para que la imagen se recorra los pixele q yo quiero...

.jimgMenu {
position:relative;
margin: 0px 0px 0px 50px;
padding: 0px;
width:900px;
height:500px;
overflow: hidden;
}

.jimgMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: block;
height: 500px;
position: relative;
}

.jimgMenu ul li {
width:300px;
float: left;
display: block;
overflow: hidden;
}

.jimgMenu ul li a {
text-indent: -1000px;
background:#fff repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow: hidden;
height: 500px;
}

.jimgMenu ul li#landscapes a {
background: url(images/landscapes.jpg) repeat scroll 0%;

}

.jimgMenu ul li#people a {
background: url(images/people.jpg) repeat scroll 0%;

}

.jimgMenu ul li#nature a {
background: url(images/nature.jpg) repeat scroll 0%;

}


.clear {
clear: both;
}

[masterojitos]

Lo deberias poner en el llamado a la libreria... osea en el javascript....

para tu caso seria asi:

Código Javascript:

<script type="text/javascript">
$().ready(function() {
    $('.jimgMenu ul').kwicks({max: 900, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
    });
</script>
 

ahi estas asignando el ancho al cual se va agrandar al pasar por encima el mouse... es decir el ancho real de la imagen...

Entonces para mas adelante, si tienes mas imagenes.... empieza por poner el max en el javascript del tamaño real, y el tamaño de las pequeñas depende de la suma del tamaño real y la suma de las otras al achicarse.

Para tu caso actual, veo que tienes 3 imagenes, en el "ul li" debes poner el ancho para cuando esten minimizadas, y la suma de esto debe dar el ancho total....

creo que hasta yo me enrede un poco.... aver si voy al codigo....

.jimgMenu ul li {
width:300px;
float: left;
display: block;
overflow: hidden;
}

ahi has puesto "300", supongo que dividiste 900 entre tus 3 imagenes, pero esta mal, xq ten en cuenta que al pasar encima, la imagen se va agrandar a 900 y las otras 2 ??

Entonces, este ancho creo que deberia ser 400.

Como obtuve el 400 ??
400 * 3 = 1200

De esta forma, al pasar el mouse, la imagen se agrandara a 900 y las otras 2 se achicaran a 150 cada una y suma los 1200.

Entonces tu css queda asi:

.jimgMenu {
position:relative;
margin: 0px 0px 0px 50px;
padding: 0px;
width:1200px;
height:500px;
overflow: hidden;
}

.jimgMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: block;
height: 500px;
position: relative;
}

.jimgMenu ul li {
width:400px;
float: left;
display: block;
overflow: hidden;
}

Asu me salio un testamento..... tiempo que no escribia tanto en un post... pero creo que era necesario.

Dios te Bendiga

[Diegoazul]

Aqui hay un tutorial en flash :

http://www.sargentoweb.com/as2/?doc=45