Cambiar imagen al hacer click (Toggle)

[nusee]

Hola! Disculpen las molestias, estoy haciendo un toggle slide vertical y funciona re bien, el problema es que quiero que cuando se haga click en la imagen, al terminarse de abrir esta cambie por otra.

Al principio como pueden ver en el archivo CSS, estoy usando la imagen contact_unselected (es una flecha hacia abajo), cuando se abre quisiera que se cargue la imagen contact_selected (flecha hacia arriba) y la verdad probe de todo y no me sale jajaj

Les dejo el codigo que estoy usando:

XHTML

<div id="contact">
<div class="content"></div>
</div>
<div id="up_down">
<h1><a id="contact_toggle" href="#">Contáctese</a></h1>
</div>

CSS

#contact{
background: #fff; position: relative;
}

#contact .content{
width: 500px; height: 80px; padding-top: 25px; margin: 0 auto;
}

#up_down{
font-size: 1.1em; text-align: center;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-bottom: 0px;
}

#up_down h1{
font-size: 1px;
}

#up_down h1 a{
background: url(../images/contact_unselected/contact_unselected.png) no-repeat; width: 13px; height: 9px; position: relative; top: 18px; left: -389px; display: block; text-indent: -1000em; overflow: hidden; float: right; margin-top: -10px; margin-right: 5px; outline: 0;
}

JS

window.addEvent('domready', function(){

$('contact').setStyle('height','auto');
var mySlide=new Fx.Slide('contact').hide();

$('contact_toggle').addEvent('click', function(e){
e=new Event(e);
mySlide.toggle();
e.stop();
});
});

Muchas gracias! =)

[caricatos]

Hola:

No parece que tu problema sea Ajax ya que no se ve que dependa con la interaxxión con el server... según parece usas una librería, por lo que pensaba mover el tema al foro frameworks, pero posiblemente te sirva una solución con javascript normal... un cambio de imagen simplemente es poner la url de la imagen en el atributo src, y si es de fondo, es algo más complejo pero no mucho...

Lo que pasa es que no acabo de entender la pregunta. Procura explicarla mejor.

Saludos

[nusee]

Hola caricatos, disculpa sino me explique bien y gracias por intentar ayudarme. Lo que yo quiero hacer es esto, tengo el toggle slide que al hacerle click a una imagen que puse se abre mostrando el contenido oculto, y yo lo que quiero es que cuando se termina de abrir la imagen en la que se habia hecho click cambie por otra.

Si lo tenes que mover te pido disculpas por haberlo puesto en el lugar que no iba, hacelo tranquilo.

Suertee! =)

[GatorV]

Tema trasladado a Frameworks.

parece ser scriptaculous.

[foreverOdd]

Hola


var mySlide=new Fx.Slide('contact',{
onComplete: function(){
//aca cambias la imagen como te dijo caricatos
}

}).hide();


Saludos

[nusee]

Hola foreverOdd, muchas gracias por tu ayuda. Lo probe y nose si lo estare haciendo mal, pero no me funciono.
Yo puse ese codigo que me pasastes en el JS que puse en el primer post, lo que no entendi muy bien es el tema del src="" ya que yo la imagen la cargue por css usando h1 y a como puse en el primer post tambien.

Disculpa las molestias y gracias de nuevo!

Suertee! =)

[foreverOdd]

var mySlide=new Fx.Slide('contact',{
onComplete: function(){
$('contact').setStyle('background',' url(../images/contact_unselected/contact_unselected.png)')
}

en el url le especificas el url de tu imagen.

Revisa la sintaxis para setStyle ya que no recuerdo muy bien como es en mootools

[nusee]

Disculpa, es que no puedo hacerlo funcionar jajaj la verdad que no tengo demasiada experiencia en Diseño Web todavia, yo lo que hice fue poner tu codigo asi

window.addEvent('domready', function(){
$('contact').setStyle('height','auto');
var mySlide=new Fx.Slide('contact').hide();
$('contact_toggle').addEvent('click', function(e){
e=new Event(e);
mySlide.toggle();
onComplete: function(){
$('contact').setStyle('background',' url(../images/contact_selected/contact_selected.png)')
}
e.stop();
});
});

Esta mal no? probe de todas las formas posibles y si bien sigue haciendo bien la funcion de mostrar el contenido oculto y despues ocultarlo nuevamente, no puedo hacer cambie la imagen cuando se hace click para abrirlo.

Disculpa por las molestias y gracias!

Suertee! =)

[foreverOdd]

es que pegaste el codigo donde no era

el onComplete es un metodo del Fx.Slide y debe ir en su declaracion.

Tal como lo puse en el post anterior

[nusee]

La verdad es que no me sale jajaj ya probe poniendolo en todos lados y me pasa que o no hace el efecto o lo hace pero sin cambiar la imagen. Voy a intentar ponerme a leer mas de MooTools haber si puedo sacarlo, igualmente muchisimas gracias foreverOdd y disculpa las molestias.

Suertee! =)