HTML - Botón con enlace al dar click y al dar otro click tener otro enlace

Buenas tardes.

Para mi página en HTML asigne a una imagen con CSS los estilos de botón (hover y a:active). Funciona perfectamente y me envía a la URL que le he asignado. Pero necesito algo:

Básicamente es un botón de Stop y Play para una música de fondo. A través de iFrames llamo un HTML que tiene la música de fondo. Tengo otro html que no tiene música. Cuando entro a la página principal empieza con el HTML que tiene la música. Cuando le doy click al botón "música-Stop" le di la URL del html que no tiene música; así que simplemente me quita la música perfectamente. Si colocará otro botón al lado con la url del html que tiene música al dar click me llamaría el HTML con la música y tendría un control de Stop y Play.

El problema esta en que quiero que al dar click al botón música, este tenga la url del HTML sin música y que al dar click a ese mismo botón tenga un segunda url que me llame el html con música. Es decir: el botón debe tener un enlace cuando se le da click y al darle nuevamente click debe tener otro enlace.

Perdón por toda la carreta, pero quería ubicarlos completamente. Gracias por la ayuda que me puedan brindar.

Hola, eso lo puedes realizar modificando la propiedad href del botón, o desde el mismo javascript con una variable que contenga el ultima valor o url...
Como haces para modificar el src del iframe?
Cuando vea el código de como lo haces, intento explicarte con mas de talle, ok?

Hola. Muchas gracias por responder. Mira:

Este es el código del iFrame:


/* iframe */
iframe {
position:absolute;
top:0px;
left:0px;
background-color:transparent;
width:100%;
height:100%;
border:0;
bottom: 1px;
}

Este es el código donde llamo los HTML y el HTM con sonido:


<!-- iframe-Htmls -->
<iframe allowtransparency="allowtransparency" name="Sound" src="Cargas/htmls/Sound-Star.html" ></iframe>
<iframe allowtransparency="allowtransparency" name="Menu-Htmls" src="Cargas/htmls/Home.html" ></iframe>

En el índex tengo el botón de música que llama el html que no tiene música para simplemente quitar la música:


<!-- Sound -->
<div id="Sound-Base"> <img src="Cargas/Imagenes/Interfaz/Sound/Base.png" width="48" height="48" alt="Sound-Base" /></div>
<span id="Sound"> <a href="Cargas/htmls/Sound-Stop.html" target="Sound"></a></span>

Lo que necesito es que al darle nuevamente click a ese botón tenga otra acción o enlace que me llame nuevamente el HTML con sonido. Y así sucesibamente.

Agradezco mucho la ayuda que me puedas brindar pues no he logrado hacerlo como quiero.

No te entiendo muy bien... el iframe del sonido esta visible... que quieres decir con "al darle nuevamente click a ese botón tenga otra acción o enlace que me llame nuevamente el HTML con sonido" que le envié el foco al iframe con el nombre Sound?

Perdóname, pero es que no consigo entenderte!!!

El Index tiene un iFrame que inicialmente llama un HTML que tiene sonido; es decir, cuando abrimos la página empieza con un fondo de música. En el índex tengo el botón de música, cuando se le da click a ese botón me llama un html que no tiene música y que remplaza el html con música. En ese momento simplemente se apaga el sonido. Quiero que al dar nuevamente click a ese botón (que en el primer click tenia el enlace del html sin sonido) tenga un nuevo enlace que ahora me vuelva a llamar el HTML con sonido.
No se si soy claro. Si yo colocara dos botones separados, uno con el enlace al html con sonido y otro con un enlace el html sin sonido la cosa funcionaria. Pero en este caso quiero que sea un mismo botón que tenga dos acciones: Al dar un click tener un enlace y al dar un segundo click tener otro enlace. Y así se represan las acciones.

Agradezco mucho la preocupación por ayudarme. Muchas gracias.