Problema con IF

[lenders]

La idea es:

- Una capa con un boton (una imagen de un signo +) para expandirla, y que muestre contenido oculto.
- Al hacer click en el boton, se expande la capa, se muestra el contenido oculto y la imagen se cambia por la imagen de un signo menos (-).
- Al pasar por encima de las imagenes de los signos + y - (dependiendo cual esté) , estas cambian por otros iguales pero con color. (El tipico efecto rollover).

Aqui los codigos:

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>  
   

Código PHP:

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

Código PHP:

  <!-- SCRIPT EXPANDIR/CONTRAER DIV Y CAMBIAR IMAGEN + POR - -->
<script type="text/javascript"> 
function div_on(){
    var imagen = document.getElementById("img_ver_mas");
    var cont_tarea = document.getElementById("contenido_tarea");
    var tarea = document.getElementById("tarea");
                
    if(imagen.src == "imagenes/ver_mas.png"){
        cont_tarea.style.display="block";
        tarea.style.height="500px";
                   imagen.src='imagenes/ver_menos.png';
    }
    else if(imagen.src == "imagenes/ver_menos.png"){
        cont_tarea.style.display="none";
        tarea.style.height="100px";
        imagen.src='imagenes/ver_mas.png';
    }
                
}
</script>  
  

El problema es que no realiza ninguna de las funciones que quiero que haga, ni rollover, ni extiende la capa, ni se cambia la imagen del + por el - y viceversa.
He comprobado la sintaxis del código y en principio está bien, creo que el problema lo tengo en los IF, pero no caigo.

EDITO: el problema era que imagen.src me devuelve http://localhost... etc entonces la comparacion del IF nunca se cumplia.

NUEVA DUDA: podria hacer el IF con la ruta http://localhost... pero cuando tenga la pagina alojada en un servidor externo, no funcionará. ¿Como puedo hacer esa comparacion del src en el IF para que no me de problemas??

[maycolalvarez]

1 - para los rollover de imágenes, use clases CSS y cambielas con JS

2 - para detectar si la capa está oculta, evalué la propiedad style.display

[hmbp22]

"
NUEVA DUDA: podria hacer el IF con la ruta http://localhost... pero cuando tenga la pagina alojada en un servidor externo, no funcionará. ¿Como puedo hacer esa comparacion del src en el IF para que no me de problemas??
"

puedes utilizar location.origin en lugar de "http://localhost"

[lenders]

Ya lo tengo gracias. Lo que hice fue guardar en una variable en un archivo aparte, la URL, pero lo de location.origin creo que sera mejor.