Devi per forza usare due frames se non vuoi che la pagina si ricarichi ogni volta: uno alto il 100% della pagina e l'altro alto 0 (in modo che sia nascosto).
Nella pagina del frame alto il 100% ci sarà il sito vero e proprio (con anche i radio buttons per la musica), mentre la pagina che viene caricata nel frame nascosto sarà inizialmente una pagina vuota (deve esserci cmq una pagina, non puoi indicare nell'attributo src del tag <frame> una pagina inesistente, altrimenti non funzione).
Quando clicchi su uno dei due radio buttons, una funzione JavaScript controlla quale dei due hai cliccato. Se hai cliccato il primo, la funzione si occupa di caricare nel frame nascosto una pagina sempre vuota, ma con i tag appropriati per la riproduzione della musica (puoi usare bgsound se ti interessa che funzioni solo in Explorer, altrimenti devi usare embed. Non usare object perché Explorer ha seri problemi con quel tag se viene usato per incorporare un file audio).
Se hai cliccato il secondo radio button, la funzione JavaScript ricarica la pagina vuota senza suono nel frame nascosto. Così ottieni anche un altro effetto: la musica non si interrompe cambiando pagina e navigando nel sito, ma solo cliccando il radio button corrispondente.
In dettaglio eccoti un po' di codice HTML e JavaScript (uso il tag bgsound nella pagina che carica il file audio per comodità).
codice:
Codice HTML del frameset:
<html>
<head>
<title>Titolo del sito</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<frameset rows="0,*" framespacing="0">
<frame src="vuoto.htm" name="musica" scrolling="no"
noresize frameborder="0">
<frame src="homepage.htm" scrolling="yes" noresize
frameborder="0">
</frameset>
</html>
Codice pagina vuota (vuoto.htm):
<html>
<head>
<title>Vuoto</title>
</head>
<body>
</body>
</html>
Codice pagina con file audio in sottofondo (music.htm):
<html>
<head>
<title>Music</title>
</head>
<body>
<bgsound src="PERCORSO FILE AUDIO" loop="infinite">
</body>
</html>
Codice radio buttons (in tutte le pagine del sito):
<input type="radio" id="startmusic"
onclick="Riproduci('startmusic');"> Music On
<input type="radio" id="stopmusic" checked
onclick="Riproduci('stopmusic');"> Music Off
Codice funzione JavaScript:
function Riproduci(idbutton) {
if (idbutton=="startmusic") {
top.musica.location = "music.htm";
}
else {
top.musica.location = "vuoto.htm";
}
}
Inoltre, siccome navigando la pagina che contiene i radio buttons viene sostituita da un'altra, lo stato di default dei radio buttons viene ripristinato anche se la musica è in esecuzione (apparirà selezionato di default il radio button della musica disattivata). Quindi devi creare un'altra funzione JavaScript che rileva se la musica è in esecuzione o meno e imposta lo stato attivo sul radio button corrispondente. La funzione (che controlla il titolo della pagina nel frame nascosto) è la seguente:
codice:
function ImpostaRadio() {
if (top.musica.document.title=="Music") {
document.getElementById("startmusic").checked = true;
document.getElementById("stopmusic").checked = false;
}
}
Questa funzione va richiamata in ogni pagina del sito tramite il gestore di evento onload nel tag <body>, in questo modo:
codice:
<body onload="ImpostaRadio();">
Salve a tutti
Permessi di invio
Rispondi quotando