onClick con dos eventos a la vez.

[jurassicboy]

Buenos días, a ver si me podéis echar un cable.

Tengo un código PHP que mediante onClick llama a una función javascript, ésta lo que hace es desplegar y esconder un listado. Inicialmente tengo una imagen con un símbolo (+) que al pulsarlo hace que se despliegue el listado. Para volverlo a esconder hago click en la misma imagen.

Lo que me gustaría es que al hacer click en (+) se desplegara el listado y en lugar de esa imagen apareciera otra imagen con un (-). Entonces al hacer click en el (-) se escondiera y volviera a aparecer el (+).

Espero haberme explicado correctamente, aquí os dejo el código:

PHP

<a href="#" onclick="cambiar('mostrar'); return false;" title="listar" class="secciono10px"><img style="vertical-align: bottom;" src="images/trans.gif" class="noticiasVerMas" alt="Ver mas" width="12px" height="12px"></a>


javascript:

function cambiar(esto)
{
vista=document.getElementById(esto).style.display;
if (vista=='none')
vista='block';
else
vista='none';

document.getElementById(esto).style.display = vista;
}

Mil gracias de antemano

[WeSoRz]

Tendrías símplemente que cambiar el src de la imagen. Para ello utiliza un identificador para la imagen y luego:

Código Javascript:

document.getElementById('idimagen').src = 'images/laotraimagen.gif';
 

Tendrías que ponerlo en el propio if donde haces el block/none, según en el estado en el que esté pones un src u otro.

[_cronos2]

Optimizándolo:

Código Javascript:

function cambiar(esto){
 with(document.getElementById(esto)){
  switch(style.display){
   case 'none':
    style.display = 'block'; 
   default:
    style.display = 'none';
  }
 }
}
 

Saludos (:

[IsaBelM]

_cronos2, siento no estar de acuerdo contigo. en realidad usar el constructor conlleva mas tiempo en la ejecución ya que cada variable dentro del bloque necesita ser comprobada para saber si es una propiedad o no del objeto del que "with" hace referencia

<offtopic>nuevo avatar, qué es??</offtopic>

[_cronos2]

Me imaginaba que lo de with era algo más lento pero lo acabo de constatar XD
<offtopic>Es un trollface, es un personaje un poco canalla. Lo puse porque me hizo mucha gracia lo de imitar la e de IE </offtopic>
Saludos (:

[zerokilled]

que tal gente!

creo que habra que hacer otro tema porque me parece que lo terminaremos cambiando el tema inicial. @isabelm, ¿puedes abundar un poco mas en lo que mencionas acerca de with? es que tengo una opinion diferente pero antes quiero estar seguro si entendi tu idea.

offtopic del offtopic de los offtopic
ya iba a comentar algo acerca del avatar pero supuse que era un troll al ver el aro y el color de iexplorer.

[jurassicboy]

Buenos días y gracias a todos por vuestras respuestas.

He intentado lo que comentan los compañeros pero continúo sin conseguirlo, he buscado información y creo que puede hacerse con un cambio de las clases que contienen cada imagen con onclick. Es decir:


<a href="#" onclick="cambiar('mostrar'); return false;" title="listar" class="secciono10px"><img style="vertical-align: bottom;" src="images/trans.gif" class="noticiasVerMas" onclick="this.className='noticiasVerMenos'; return false;" alt="Ver mas" width="12px" height="12px"></a>

De esta forma consigo que al clickar y desplegar la información pase de mostrar el símbolo (+) y muestre el símbolo (-). Lo malo es que cuando vuelvo a pulsar para esconder la información el símbolo (-) no cambia a símbolo (+) de nuevo.

Una vez lo solucione ya me centraré en optimizar el código :)

[WeSoRz]

El tema es que no tienes puesta ninguna ID a la imagen para identificarla. Para que funcione el código que has puesto deberías modificar la función cambiar y dejarlo algo así (reutilizando tu código):

Código Javascript:

function cambiar(esto)
{
vista=document.getElementById(esto).style.display;
if (vista=='none') {
vista='block';
clase = 'noticiasVerMenos';
} else {
vista='none';
clase = 'noticiasVerMas';
}
 
document.getElementById(esto).style.display = vista;
document.getElementById('imgVer').className = clase;
}
 

Código HTML:

<a href="#" onclick="cambiar('mostrar'); return false;" title="listar" class="secciono10px"><img id="imgVer" style="vertical-align: bottom;" src="images/trans.gif" class="noticiasVerMas" onclick="this.className='noticiasVerMenos'; return false;" alt="Ver mas" width="12px" height="12px"></a>
 

Aunque sigo pensando que te sería más fácil en vez de tener que crear una clase para cada estado, cambiar directamente el src de la imagen del mismo modo:

Código Javascript:

function cambiar(esto)
{
vista=document.getElementById(esto).style.display;
if (vista=='none') {
vista='block';
img = 'vermenos.gif';
} else {
vista='none';
img = 'vermas.gif';
}
 
document.getElementById(esto).style.display = vista;
document.getElementById('imgVer').src = 'images/'+img;
}
 

Código HTML:

<a href="#" onclick="cambiar('mostrar'); return false;" title="listar" class="secciono10px"><img id="imgVer" style="vertical-align: bottom;" src="images/trans.gif" alt="" width="12px" height="12px"></a>
 

Menos engorroso :)

[jurassicboy]

Buenas de nuevo, quien diría que algo que parece tan sencillo se convertiría en algo tan tedioso!

La segunda manera, la menos engorrosa no funciona, no cambia la imagen. La primera sí la cambia pero se queda el símbolo (-) cogido, es decir, el segundo onclick no funciona.

Continúo mirando a ver si encuentro el error.
¡Que locura!

[WeSoRz]

La segunda debería funcionar igualmente (al menos la idea) salvo que la ruta de las imágenes esté mal. Siempre puedes depurar con alerts poniendo por ejemplo: alert('images/'+img); a ver si cada vez que le das te muestra un resultado distinto.

[jurassicboy]

Si, comprobé la ruta de las imágenes, al tener el archivo .js dentro del directorio images/, es decir en images/desplegable.js dejé esta línea así:

document.getElementById('imgVer').src = img;

Pero nada, muestra imagen en blanco. Con la primera manera al menos muestra el primer click correctamente. umm..

[WeSoRz]

Pues ahí tienes el error. El JS toma como ruta donde se esté ejecutando. Si tu en index.html llamas a images/desplegable.js, las funciones tomarán la ruta de index.html. Prueba y nos dices ;)

[jurassicboy]

Finalmente lo he podido solucionar gracias a vuestra ayuda, ahí va por si a alguien le interesa hacer algo parecido:

Función javascript:

Código Javascript:

function cambiar(esto)
      {
      vista=document.getElementById(esto).style.display;
      if (vista=='none') {
      vista='block';
      img = 'images/simbolomenos.jpg';
      titulo = 'Ocultar';
      } else {
      vista='none';
      img = 'images/simbolmas.jpg';
      titulo = 'Mostrar todos';
      }
      document.getElementById(esto).style.display = vista;
      document.getElementById('imgVer').src = img;
      document.getElementById('imgVer').title = titulo;
      
      }
 

PHP:

Código PHP:

<a href="#" onclick="cambiar('mostrar'); return false;" title="Mostrar todos" class="secciono10px"><img id="imgVer" style="vertical-align: bottom;" src="images/trans.gif" class="noticiasVerMas" alt="" width="12px" height="12px"></a>
 

Muchísimas gracias a todos por vuestra ayuda!!

Por cierto, si quisieran hacerse dos listados desplegables ¿es posible utilizar la misma función pero doblando la información?

[WeSoRz]

Ves? cosa de las rutas jeje De todos modos para ver éste tipo de errores ayuda mucho el Firebug y el Web Developer, que pese a que no te muestran la imagen (por estar mal la ruta) te hubieran mostrado o bien el error o bien que se está haciendo el cambio de src, aunque fuera a una ruta incorrecta

Se puede hacer con dos desplegables indicando por ejemplo por parámetro la id de la imagen que quieres cambiar, pero si empiezas a enrevesarlo te recomiendo jquery con sus eventos, métodos y selectores bastante cómodos para éste tipo de tareas (y que simplifican infinitamente todo).

[IsaBelM]

Iniciado por zerokilled

que tal gente!

creo que habra que hacer otro tema porque me parece que lo terminaremos cambiando el tema inicial. @isabelm, ¿puedes abundar un poco mas en lo que mencionas acerca de with? es que tengo una opinion diferente pero antes quiero estar seguro si entendi tu idea.

offtopic del offtopic de los offtopic
ya iba a comentar algo acerca del avatar pero supuse que era un troll al ver el aro y el color de iexplorer.

me ha constado bastante encontrar el articulo sobre el que se basaba mi respuesta, ya que hace mucho que lo leí

[zerokilled]

gracias por el enlace isabel! en fin, la opinion que tenia no demuestra lo contrario a tu comentario. ademas de que creo que me estaba llendo por otro lado.