Boton ON/OFF (onclick)

[lenders]

Quiero conseguir el efecto de que, al hacer click en una imagen, esta cambie, y al hac er click en la nueva imagen, se vuelva a poner la de inicio.

Código PHP:

  <a href='#' onmouseover="img_on()" onmouseout="img_off()" onclick="div_on()"><img src='imagenes/ver_mas.png' alt='Ver m&aacute;s' title='Ver tarea' id='img_ver_mas' /></a>  
   

Las imagenes sobre las que quiero conseguir esto, tienen un 'rollover', con el siguiente codigo:

Código PHP:

  <!-- SCRIPT ROLLOVER IMAGEN VER TAREA --> 
<script type="text/javascript"> 
            function img_on(){ 
                var img = document.getElementById("img_ver_mas"); 
                 
                if(img.src = "imagenes/ver_mas.png"){ 
                    img.src='imagenes/ver_mas_over.png'; 
                } 
                else if(img.src = "imagenes/ver_menos.png"){ 
                    img.src='imagenes/ver_menos_over.png'; 
                } 
            } 
             
            function img_off(){ 
                var img = document.getElementById("img_ver_mas"); 
                 
                if(img.src = "imagenes/ver_mas_over.png"){ 
                    img.src='imagenes/ver_mas.png'; 
                } 
                else if(img.src = "imagenes/ver_menos_over.png"){ 
                    img.src='imagenes/ver_menos.png'; 
                } 
            } 
</script>  
  

Y el codigo con el que estoy intentando hacer el 'ON / OFF' es este:

Código PHP:

  <script type="text/javascript">  
function div_on(){ 
                var img = document.getElementById("img_ver_mas"); 
                var cont_tarea = document.getElementById("contenido_tarea"); 
                var tarea = document.getElementById("tarea"); 
                 
                if(img.src = "imagenes/ver_mas.png"){ 
                    cont_tarea.style.display="block"; 
                    tarea.style.height="500px"; 
                    document.getElementById("img_ver_mas").src='imagenes/ver_menos.png'; 
                } 
                else if(img.src = "imagenes/ver_menos.png"){ 
                    cont_tarea.style.display="none"; 
 
                    document.getElementById("img_ver_mas").src='imagenes/ver_mas.png'; 
                } 
                 
            } 
</script>  
  

Tambien estoy haciendo que una capa se agrande, como veis.

El problema es que cuando hago click en el MAS, la imagen cambia a la de un MENOS, pero al quitar el raton (onmouseout) la imagen se vuelve a poner el MAS, en lugar de hacer el rollover del menos.

No se si me he explicado bien.

[ZiTAL]

tienes toogle en el core de jquery:

http://api.jquery.com/toggle/

[lenders]

Gracias pero me interesa mas trabajar sobre mi codigo, en lugar de usar librerias. ya que asi aprendo a hacerlo desde 0