Funzione JavaScript per selezione

SilverSeraph · 11 Giu 2006

Salve a tutti, ho uno script JavaScript che mi consente di cambiare descrizione un un box a seconda di ciò che si seleziona.
Lo script è raggiungibile a questa pagina: http://www.silverseraph.com/prova.php
ora io vorrei fare in modo che se clicco ad esempio su Ultimi Cellulari esso rimanga blu (come nell'effetto hover).
Lo script è il seguente

HTML:

<LINK rel="stylesheet" type="text/css" href="./templates/style.css">
<script language="javascript" type="text/javascript">
function ApriDiv(div) {
  switch (div) {
      case "box1":  
  	  contenuto='<table width="100%" height="178" BORDER="0" CELLSPACING="0" CELLPADDING="0"><tr><td class="write"><div class="link_cell"><a href="vedi_scheda.php?id=80"><img src="./templates/cellulari/nokia/ico_n93.gif" alt=""><br>Nokia<br> N93</a></div></td><td class="write"><div class="link_cell"><a href="vedi_scheda.php?id=79"><img src="./templates/cellulari/nokia/ico_n73.gif" alt=""><br>Nokia<br>  N73</a></div></td><td class="write"><div class="link_cell"><a href="vedi_scheda.php?id=78"><img src="./templates/cellulari/nokia/ico_n72.gif" alt=""><br>Nokia<br> N72</a></div></td><td class="write"><div class="link_cell"><a href="vedi_scheda.php?id=33"><img src="./templates/cellulari/lgelectronics/ico_kg320.gif" alt=""><br>LG<br> KG320</a></div></td><td class="write"><div class="link_cell"><a href="vedi_scheda.php?id=42"><img src="./templates/cellulari/motorola/ico_v3i.gif" alt=""><br>Motorola<br> RAZR V3i</a></div></td><td class="write"><div class="link_cell"><a href="vedi_scheda.php?id=8"><img src="./templates/cellulari/alcatel/ico_e260.jpg" alt=""><br>Alcatel<br> E260</a></div></td></tr><tr><td class="write" valign="top"><div class="link_cell"><a href="vedi_scheda.php?id=7"><img src="./templates/cellulari/alcatel/ico_e259.jpg" alt=""><br>Alcatel<br> E259</a></div></td><td class="write" valign="top"><div class="link_cell"><a href="vedi_scheda.php?id=31"><img src="./templates/cellulari/lgelectronics/ico_kg920.gif" alt=""><br>LG<br> KG920</a></div></td><td class="write" valign="top"><div class="link_cell"><a href="vedi_scheda.php?id=47"><img src="./templates/cellulari/motorola/ico_v195.jpg" alt=""><br>Motorola<br> V195</a></div></td><td class="write" valign="top"><div class="link_cell"><a href="vedi_scheda.php?id=46"><img src="./templates/cellulari/motorola/ico_l7i.jpg" alt=""><br>Motorola<br> L7i</a></div></td><td class="write" valign="top"><div class="link_cell"><a href="vedi_scheda.php?id=58"><img src="./templates/cellulari/nec/ico_n500.jpg" alt=""><br>Nec<br> N500iS</a></div></td><td class="write" valign="top"><div class="link_cell"><a href="vedi_scheda.php?id=57"><img src="./templates/cellulari/nec/ico_n343.jpg" alt=""><br>Nec<br> N343i</a></div></td></tr></table>';
      break;
      case "box2":
  	  contenuto='<table width="100%" height="178"  cellspacing="0" cellpadding="0" border="0"><tr><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=106"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/my400xico.jpg" alt="Sagem MY 400X"><br>Sagem<br>MY 400X</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=105"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myt22ico.jpg" alt="Sagem MY T-22"><br>Sagem<br>MY T-22</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=104"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myx22mico.jpg" alt="Sagem MY X2-2m"><br>Sagem<br>MY X2-2m</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=103"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myc42ico.jpg" alt="Sagem MY C4-2"><br>Sagem<br>MY C4-2</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=102"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myx12ico.jpg" alt="Sagem MY X1-2"><br>Sagem<br>MY X1-2</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=101"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myx62ico.jpg" alt="Sagem MY X6-2"><br>Sagem<br>MY X6-2</a></div></td></tr><tr><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=100"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myc32jico.jpg" alt="Sagem MY C3-2j"><br>Sagem<br>MY C3-2j</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=99"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myc32ico.jpg" alt="Sagem MY C3-2"><br>Sagem<br>MY C3-2</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=98"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myx22ico.jpg" alt="Sagem MY X2-2"><br>Sagem<br>MY X2-2</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=97"> <img width="30" height="60" border="0" src="./templates/cellulari/sagem/myx8ico.jpg" alt="Sagem MY-X8"><br>Sagem<br>MY-X8</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=96"> <img width="30" height="60" border="0" src="./templates/cellulari/panasonic/vs9ico.jpg" alt="Panasonic VS9"><br>Panasonic<br>VS9</a></div></td><td class="write"><div class="link_cell"> <a href="vedi_scheda.php?id=95"> <img width="30" height="60" border="0" src="./templates/cellulari/panasonic/mx7ico.jpg" alt="Panasonic MX7"><br>Panasonic<br>MX7</a></div></td></tr></table>';  
	    break;
      case "box3":
  	  contenuto='<table width="100%" height="178" cellSpacing="0" cellPadding="0" border="0">  <tr> <td class="write"><img src="./templates/moreblue.gif" alt=""> <a class="white" href="view_download.php?id=2">MotoCommKit (MCK) 1.38</a> (downloads: 4)</td> </tr> <tr> <td class="write"><img src="./templates/moreblue.gif" alt=""> <a class="white" href="view_download.php?id=3">Tema Blue</a> (downloads: 0)</td> </tr> <tr> <td class="write"><img src="./templates/moreblue.gif" alt=""> <a class="white" href="view_download.php?id=4">Tema Fire</a> (downloads: 0)</td> </tr> <tr> <td class="write"><img src="./templates/moreblue.gif" alt=""> <a class="white" href="view_download.php?id=5">Audio CFG</a> (downloads: 0)</td> </tr> <tr> <td class="write"><img src="./templates/moreblue.gif" alt=""> <a class="white" href="view_download.php?id=1">Flex Backup per Motorola E1000</a> (downloads: 2)</td> </tr> </table>'; 
	    break;
  }
document.getElementById("div").innerHTML=contenuto;
}
</script>
  <table width="314" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="padding-right:2px;">
              <a class="menuLink" href="javascript:ApriDiv('box1');"><b>Ultime uscite</b></a>
            </td>
            <td style="padding-right:2px;">
              <a class="menuLink" href="javascript:ApriDiv('box2');"><b>Ultme Schede</b></a>
            </td>
            <td>
              <a class="menuLink" href="javascript:ApriDiv('box3');"><b>Downloads</b></a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="background-color: #e8e8e8;" class="tabella_centro_sinistra_blue"></td>
            <td class="bg_footer">
              <div id="div"></div>
                <script language="Javascript" type="text/javascript">
                  ApriDiv("box1");
                </script>
            </td>
            <td style="background-color: #e8e8e8;" class="tabella_centro_destra_blue"></td>
          </tr>
	  <tr>
	    <td style="background-color: #e8e8e8;" height="6" width="3"><img src="./templates/corner/basso_sinistra_blue.gif" height="6px" width="3px" alt=""></td>
	    <td style="background-color: #e8e8e8;" width="100%" class="tabella_centro_basso_blue"></td>
	    <td style="background-color: #e8e8e8;" width="3"><img src="./templates/corner/basso_destra_blue.gif" height="6px" width="3px" alt=""></td>
	  </tr>
        </table>
      </td>
    </tr>
  </table>

Grazie mille

Mega69 · 11 Giu 2006

a:visited

lo fai uguale ad a:hover

a meno che io non abbia frainteso il tuo problema...
Vabbo, io c'ho provato!

SilverSeraph · 11 Giu 2006

Eh si, mi dispiae ma hai frainteso. Non è un problema dicss... vorrei che ad esempiod e Ultime Usctie è selezionato che rimanga selezionato in blu come nell'effetto hover. Poi se vado su Sownloads, che diventi blu quell'altro.

Mega69 · 12 Giu 2006

Ora credo di aver capito...
In effetti devi lavorare un po con css, ma se l'hai gia fatto serve solo javascript.
In pratica ti basta creare due classi, una in cui il tab rimane normale e uno in cui diventa blu...
Questo cmq credo che tu l'abbia gia fatto...

Ora devi fare in modo che all'evento onclick, l'elemento che deve cambiare colore (che deve essere identificato anche da un id), da blu a bianco, cambi classe.

Es

function scrittanormale()
{
document.getElementById("qua_metti_l'id_del_box").className="primaclasse";
}

function scrittablu()
{
document.getElementById("qua_metti_l'id_del_box").className="secondaclasse";
}

Ricordati che di un'elemento pui cambiare solo il class, non l'id, quindi se hai identificato i tuoi box nel css mediante # al posto del . , devi convertire i tuoi id in classi.

Inoltre quelle due funzioni è ovvio che le ho scritte senza tenere conto del tuo codice, in ogni caso sarà facile adattarle!

Cerca

Cerca

Funzione JavaScript per selezione

SilverSeraph

Nuovo Utente

Mega69

Nuovo Utente

SilverSeraph

Nuovo Utente

Mega69

Nuovo Utente

Discussioni simili