Funzione JavaScript per selezione

SilverSeraph

Nuovo Utente
11 Giu 2006
18
0
0
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

Nuovo Utente
10 Giu 2006
6
0
0
a:visited

lo fai uguale ad a:hover

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

SilverSeraph

Nuovo Utente
11 Giu 2006
18
0
0
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

Nuovo Utente
10 Giu 2006
6
0
0
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!
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
T [Javascript] funzione per attivare analytics... dov'è l'errore? Javascript 14
L [javascript]problema funzione per webapi Javascript 4
A Funzione javascript per effettuare la slide del carosello in avanti Javascript 0
G funzione javascript per passaggio valori Javascript 1
M JavaScript: lanciare funzione ASP per salvare dati in database Javascript 0
G [javascript]Chiamare funzione javascript per menù Javascript 2
A funzione javascript per validazione form Javascript 3
C lanciare una funzione javascript e attenderne la fine per lanciarne una seconda Javascript 1
IClaude Funzione Javascript Javascript 8
max1974 [Javascript] Funzione Errata procedura Javascript 2
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
R [Javascript] Rendere una funzione sempre visibile Javascript 2
A [Javascript] tabella dinamica e onchange su funzione Javascript 1
P [Javascript] Inserire una nuova condizione in una funzione Javascript 3
C [Javascript] Chiamata di una funzione da *.js esterno Javascript 1
J [Javascript] una funzione ricorsiva che non capisco come lavori Javascript 6
G [Javascript] nome da dare ad una funzione Javascript 1
Laskot [Javascript] Funzione JS con parametro Javascript 4
ken_korn [Javascript] Portare variabile in una funzione esterna al suo scope Javascript 2
I Riportare dati funzione javascript in textbox Javascript 0
P [Javascript] eseguire una funzione dopo un'altra Javascript 0
Strato-Fortex [Javascript] Risoluzione funzione cifrario di Cesare Javascript 4
S [Javascript] Problema richiamo funzione Javascript 8
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
M [Javascript] Funzione con collegamenti ipertestuali JS Javascript 4
Andrea Perrone funzione javascript applicata al gioco della dama Javascript 2
S [Javascript] Codice JS inline non funzione su IE Javascript 1
ANDREA20 [Javascript] funzione menu Javascript 1
M Far partire una funzione/codice php con javascript Javascript 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 7
Marco_88 Funzione mouseover Javascript jQuery 3
V Chiamata funzione php da javascript Ajax 3
M Lanciare una funzione asp.net con javascript. E' possibile? ASP.NET 0
A richiamare funzione javascript dopo login in popup. Javascript 0
B AIUTO: come passare una variabile php ad una funzione javascript Javascript 2
ivarello Attivare funzione Javascript con Jquery jQuery 0
F funzione javascript all'interno di un codice php PHP 38
A eseguire codice html da funzione javascript Javascript 2
C Un form di input e uno di output con funzione javascript Javascript 17
D Problema nella chiamata ad una funzione javascript da href Ajax 2
A Salvataggio dati (era: funzione penso in javascript) PHP 2
I Eseguire funz. Javascript caricata tramite la funzione Ajax di JQuery in onChange Javascript 0
I Eseguire funz. Javascript caricata tramite la funzione Ajax di JQuery in onChange Javascript 0
mkrapfen aiuto! funzione javascript Javascript 0
G ajax php myqsl - problema con funzione javascript Ajax 1
I javascript non carica funzione Javascript 0
D Funzione javascript che pulisca un campo input Javascript 0
F Memorizzare valore variabile da una funzione javascript Javascript 10

Discussioni simili