codigo javascript boton toggle para abrir y cerrar ventana emergente

[becquerel]

hola amigos que tal un saludo cordial a todos los miembros del foro, mi consulta es la siguiente:

tengo un botón (que es una imagen) que me abre una ventana emergente, hice una clase en css para que al activar dicho botón, este cambie de color y me coloque otra imagen que denota que dicho botón esta activado.

es decir, al pulsar el botón efectivamente me abre la ventana emergente y mi botón cambia de estado, (tiene una imagen inicial que indica que si presionas se abre, luego que ya has presionado y la ventana está abierta, el botón cambia de estado mostrando otra imagen que sugiere que si presionas nuevamente cerrarás la ventana emergente antes abierta, estilo toggle) el problema este en:

*sabiendo que en javascript el código para abrir y cerrar ventanas emergentes viene dado por los métodos open () o close() sobre el objeto window. como hago para incluir el close para cerrar la ventana cuando vuelva a presionar sobre el botón?


el código que me abre la página emergente dentro del body de la pagina web es este:

Código HTML:

<div align="center">
 <a class="botonete"  href="javascript:;" onclick="MM_openBrWindow('./ch1/index1.php','buscador','scrollbars=yes,width=680,height=500')"><img src="imallgen/louusqyeda.png" width="143" height="40" border="0" /></a>   
        
        </div>
 

y el css

Código CSS:

a.botonete{
    position: absolute;
    text-decoration: none;
    top: 240px;
    right: -2px;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:#000;
    padding: 25px 0px 15px 0px;
    font-weight: 430;
    background:#F8F8F8 url(../imagen/abrir.png) 5% 5% no-repeat;
    border:1px solid #ccc;
    display: block;
    background-color: #F8F8F8;
    width: 150px;
    height: 31px;
}
a.trigger:hover{
    position: absolute;
    text-decoration: none;
    top: 240px;
    right: -2px;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:#000;
    padding: 25px 0px 15px 0px;
    font-weight: 430;
    background:#F8F8F8 url(../imagen/activado.png) 5% 5% no-repeat;
    border:1px solid #000;
    display: block;
    width: 150px;
    height: 31px;
}
a.active.trigger {
background:#fff url(../imagen/cerrar.png) 5% 1% no-repeat;
 
}
 

cualquier ayuda que me puedan dar bienvenida será gracias

[maycolalvarez]

puedes acceder a la ventana que abrió la emergente desde la misma con:

window.opener.document.getElementById

y así puedes buscar el botón y actualizarlo

[becquerel]

perdona la verdad pues no entiendo mucho que digamos, por lo que estuve mirando pues no es lo que quiero, es decir no quiero cerrar la ventana desde la misma ventana que se abrió, si no del mismo botón que se abrió, (que es una imagen css que normal esta en verde, hover esta amarilla y activada está en roja, cuando está activada es cuando quisiera que el comportamiento funcionase) por ejemplo:

<div align="center"> <a class="botonete" href="javascript:void(0)" onClick="vbuscar=window.open('./sitio/index1.php','buscador','scrollbars=yes,width=680,h eight=500'); return false;"><img src="imallgen/louusqyeda.png" width="143" height="40" border="0" /></a>

<a class="a.active.botonete" href="javascript:void(0)" onClick="vbuscar.close()"></a>


</div>

se que lo anterior esta mal, aun dejando solo botonete que es el nombre de la clase pues así solo cierra mas no abre.

[maycolalvarez]

vbuscar.close(); ¿eso es lo que quieres?

[becquerel]

si pero no me funciona, lo que quiero es que el mismo botón sirva para abrir y cerrar la ventana emegente