css gestiti da javascript - mi date una mano?

**klauzz** · 04-12-2003, 13:08

raga, mi occorre una info dato che vorrei realizzare un menù che faccia sì che rimanga attivo il pulsante relativo alla pagina visualizzata.

ho scritto 3 css per 3 pulsanti:

-pulsante on mouse out
-pulsante on mouse over
-pulsante on mouse down

vorrei realizzare un menù che funzioni in questo modo:

quando sono "on mouse over" sul numero 1, il 2 e il 3 sono in stato "on mouse out".

quando sono "on mouse down" sul numero 1, il 2 e il 3 sono in stato "on mouse out"

e così via per gli altri, in modo tale che quando si attiva uno, gli altri si disattivano.

Fatemi sapere

Klauzz

**kirikong** · 04-12-2003, 13:17

cioè non funzionino i link?

**klauzz** · 04-12-2003, 14:00

no, non è quello che intendevo.
c'è qualcuno che può aiutarmi?

**br1** · 04-12-2003, 14:26

Ho paura che la descrizione non basti... posta il codice dei CSS e dei pulsanti

ciao

**klauzz** · 04-12-2003, 16:43

vorrei che lo stato down rimanga selezionato fino a quando non clicco su un altro pulsante, in modo tale che l'utente capisce in che pagina si trova, mi capite?

-----------------------------------------------------

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu</title>
<style>
Td.out {
background-color: #CCCCCC;
color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: bold;
text-indent: 5px;
}

Td.over {
background-color: #666666;
color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: bold;
text-indent: 5px;
}

Td.down {
background-color: #f0f0f0;
color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: bold;
text-indent: 5px;
}

</style>
</head>

<body>
<table cellpadding="0" cellspacing="0" width="200" border="1">
<tr>
<td height="15" onClick="'#'" onmousedown="this.className='down'" style="cursor:hand" class="out" onMouseover="this.className='over'" onMouseOut="this.className='out'">.:Chi Siamo</td>
</tr>
<tr>
<td height="15" onClick="'#'" onmousedown="this.className='down'" style="cursor:hand" class="out" onMouseover="this.className='over'" onMouseOut="this.className='out'">.

ove Siamo</td>
</tr>
<tr>
<td height="15" onClick="'#'" onmousedown="this.className='down'" style="cursor:hand" class="out" onMouseover="this.className='over'" onMouseOut="this.className='out'">.:Contatti</td>
</tr>
</body>
</html>

----------------------------------------------

fatemi sapere

grazie

KLauzz

**klauzz** · 05-12-2003, 10:52

up :quote:

**Mich_** · 05-12-2003, 11:27

Ho capito, ma ho ancora un dubbio.
In pratica tu hai tre stati:
over
out
click

dove con click io intendo che il pulsante e` stato cliccato, ed ha eseguito una funzione, per cui non ritorna nella condizione di out quando il mouse esce (questo e` il dubbio che ho).

Io pero` userei l'evento click, non l'evento down.
Devi anche preparare una varibile in modo che il sistema sappia quale bottone e` stato cliccato per ultimo.
La definizione della var deve stare in uno script nella head:
<script ...>
var ultimo=0;
</script>

In conclusione:

<td height="15" onClick="fa_qualcos_altro(1); ultimo=1; this.className='down';" style="cursor:hand" class="out" onMouseover="this.className='over'" onMouseOut="this.className=(ultmo==1)?'down':'out' ">.: Chi Siamo</td>

Gli altri "tasti" saranno simili con valori della variabile diversi.

Spero di essermi spiegato (ma forse sono stato un po' troppo conciso).

Ciao
Michele

**klauzz** · 05-12-2003, 18:36

uhm... ok ok...

ma mi posteresti il code per realizzare 3 pulsanti in 3 td uno accanto all'altro, con 3 stili diversi per i tre stati?

ricorda che il "down" di un pulsante deve disattivare lo stato "down" di quello precedentemente selezionato.

usa il code che ho postato sopra e modificalo a tuo piacimento

ti ringrazio.

Klauzz

Discussione: css gestiti da javascript - mi date una mano?

Strumenti discussione

Ricerca discussione

Visualizza

css gestiti da javascript - mi date una mano?

Permessi di invio