Come nascondere un lettore musicale senza lasciare spazio

March 1

Come nascondere un lettore musicale senza lasciare spazio


Un sito ben progettato utilizza lo spazio in modo efficiente. Troppi oggetti su una pagina in grado di creare ingombro visivo e diminuire l'usabilità del sito. Un modo per dare il vostro respiro sito è quello di nascondere gli oggetti che un utente non ha bisogno di vedere. giocatori di musica possono consumare spazio prezioso, soprattutto se sono di grandi dimensioni. È possibile utilizzare il codice HTML "visibilità" di proprietà per fare un giocatore invisibile, ma che lascia dietro di sé un grande spazio vuoto. Eliminare tale spazio utilizzando JavaScript per nascondere un lettore di musica su richiesta.

istruzione

1 Avviare un editor HTML o Blocco note e aprire una pagina Web che contiene un lettore musicale.

2 Individuare il codice HTML che crea il lettore musicale. Se qualcun altro codificato il giocatore HTML per voi, cercare un blocco di codice simile al seguente:

<Object width = "400" height = "400">

<Param name = "movie" value = "SomeMusicPlayer.swf">

<Embed width = "400" height = "425">

</ Embed>

</ Object>

Si tratta di un blocco di "oggetto". Esso contiene il codice che gli sviluppatori utilizzano per incorporare oggetti in una pagina Web. In questo esempio, il blocco definisce un lettore Flash. Si noti che il blocco inizia con una apertura "<object>" tag e termina con una chiusura "<object />" tag.

3 Aggiungere il seguente codice HTML prima dell'apertura tag "<object>":

<Div id = "MusicPlayerBlock">

4 Aggiungere questa riga di codice dopo la chiusura "<object />" tag:

</ Div>

Il codice che si aggiunge mette il lettore musicale all'interno di un blocco "div". ID del blocco div è definito come "MusicPlayerBlock."

5 Aggiungere questo codice sotto il tag "</ div> indicato nel passaggio precedente.

<Input id = tipo "HidePlayer" = valore "pulsante" = "Nascondi Player" onclick = "managePlayer ( 'none')" />

<Input id = "ShowPlayer" type = valore "pulsante" = "Mostra Player" onclick = "managePlayer ( 'block')" />

Questo crea un pulsante che nasconde il giocatore e uno che fa riapparire.

6 Aggiungere questo codice JavaScript alla sezione "<head>" del tuo documento HTML:

<Script language = tipo "javascript" = "text / javascript">

Funzione managePlayer (azione) {

var playerObject = document.getElementById ( "MusicPlayerBlock");

playerObject.style.display = azione;

}

</ Script>

Quando un utente fa clic sul pulsante "Hide Player", questo codice verrà eseguito, nascondendo il lettore musicale. Facendo clic sul pulsante "Mostra Player" renderà il giocatore riappaiono.

7 Salvare il documento HTML che hai modificato e aprirlo nel browser. Si vedrà il lettore musicale. Fare clic sul pulsante "Nascondi Player". Il lettore musicale scomparirà senza lasciare uno spazio vuoto.

8 Fare clic sul pulsante "Mostra Player". Il lettore musicale tornerà.

Consigli e avvertenze

  • In questo esempio, l'ID del tag "div" è "MusicPlayerBlock." Questo nome corrisponde al nome nella seguente dichiarazione JavaScript:
  • var playerObject = document.getElementById ( "MusicPlayerBlock");
  • Se si rinomina il vostro "div" ID del tag, fare in modo che si modifica il nome corrispondente nella dichiarazione "document.getElementById" pure. I due nomi devono corrispondere.