Ho un problema un po' complesso da spiegare...

di
Tavrotto
il
4 risposte
T
Tavrotto
Utente Attivo
Iscritto da
mag, 2002
Messaggi:
86

Ho un problema un po' complesso da spiegare...

Ciao a tutti! La domanda che vorrei porre è abbastanza complessa da formulare ma cercherò di essere il più possibile chiaro:
Ho un menu con le varie opzioni e sfondo bianco. I collegamenti hanno queste proprietà:
<style>
a:link{color:#800000;text-decoration:none}
a:hover{color:red;text-decoration:none}
a:visited{color:#800000;text-decoration:none}
</style>
Ho fatto in modo che, quando si passa con il mouse sopra la cella contenente l'opzione da selezionare, lo sfondo di questa (della cella)diventi di un altro colore. In corrispondenza a questo cambio di colore della cella vorrei facesse lo stesso il testo:per esempio, se punto con il mouse un angolo della cella <b>(quindi non sono sopra il testo)</b> mi cambia lo sfondo di questa ma vorrei cambiasse anche il colore del testo con essa.
Spero di essermi spiegato...
Ringrazio anticipatamente,
Ciao

dnd*

4 Risposte

  • W
    Wolly
    Utente Attivo
    Iscritto da
    dic, 2002
    Messaggi:
    91

    Re: Ho un problema un po' complesso da spiegare...

    Come fai a cambiare colore alla tabella?
    Usi uno script ?

    Se usi uno script puoi inserire all'interno della funzione del codice per il tuo link.

    <a id="nome" href="">sito</a>

    <script language="javascript">
    function cambia() {
    document.all.nome.style.color='#ffffff'
    }
    </script>

    <td onmouseover="cambia()">

    Capito !!!!!!!

    Wolly
  • T
    Tavrotto
    Utente Attivo
    Iscritto da
    mag, 2002
    Messaggi:
    86

    Re: Ho un problema un po' complesso da spiegare...

    Scusa, mi sono sicuramente spiegato io male...
    In pratica io ho questo codice:
    _________________________________________________________________<style>
    a:link{color:#800000;text-decoration:none}
    a:hover{color:red;text-decoration:none}
    a:visited{color:#800000;text-decoration:none}
    </style>
    <style fprolloverstyle>
    a:hover{color:red;text-decoration:none}
    </style>
    </head>
    <body leftmargin="0" topmargin="0" target="principale">
    <table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0" style="border-right: 1 solid #000000">
    <tr><td valign="top" style="border-right: 0 solid #000000">
    <p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">
    <table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr><td valign="up">
    <br><br>
    <table align="center" cellpadding="2" width="75%" cellspacing="0" style="border: 1 solid #000000">
    <tr><td align="center" style="border-bottom: 1 solid #000000" bgcolor="#FFFFFF" width="117">
    <p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Arial" color="#000080"><b>MENU'</b></font>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font face="Arial" size="2"><a href="home.htm">Home</a></font></b>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font size="2" face="Arial">Novità</font>
    </b>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font size="2" face="Arial">Foto</font>
    </b>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font face="Arial" size="2">Chat</font></b>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font face="Arial" size="2">Forum</font></b>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font size="2" face="Arial">Bacheca</font></b>
    <tr><td align="center" bgcolor="#FFFFFF" style="border-bottom: 1 solid #C0C0C0" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font size="2" face="Arial">Links</font></b>
    <tr><td align="center" bgcolor="#FFFFFF" width="117"
    onmouseover="this.style.backgroundColor='#E9E9E9'"
    onmouseout="this.style.backgroundColor='#FFFFFF'">
    <p align="left"><b><font face="Arial" size="2">Webmaster</font></b>
    </table>
    </table>
    </table>
    </body>
    _________________________________________________________________

    Così, quando passo sopra la cella con il mouse, questa diventa grigia, ma per far cambiare il colore anche al testo devo per forza passarci sopra. E' possibile, passando solo sopra la cella, cambiare sia il colore di questa, sia quello del testo?
    Grazie

    dnd*
  • W
    Wolly
    Utente Attivo
    Iscritto da
    dic, 2002
    Messaggi:
    91

    Re: Ho un problema un po' complesso da spiegare...

    Io direi di riordinare un pò tutto quel codice !!!!
    Ed usiamo una funzione javascript!

    <style>
    a:link{color: #000000; text-decoration: none}
    a:hover{text-decoration: none}
    a:visited{color: #000000; text-decoration: none}
    .cella
    {
    background-color: #ffffff;
    border-bottom: 1 solid #c0c0c0;
    font-size: 10pt;
    font-family: arial;
    font-weight: bold;
    font-color: 000000;
    }
    </style>
    <style fprolloverstyle>
    a:hover{color:red;text-decoration:none}
    </style>
    <script language="javascript">
    function accendi(v) {
    c = "c"+v
    l = "l"+v
    document.all[c].style.background="#e9e9e9";
    document.all[c].style.color="red";
    document.all[l].style.color="red";
    }
    function spegni(v) {
    c = "c"+v
    l = "l"+v
    document.all[c].style.background="#ffffff";
    document.all[c].style.color="#000000";
    document.all[l].style.color="000000";
    }
    </script>
    </head>
    <body leftmargin="0" topmargin="0" target="principale">
    <table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0" style="border-right: 1 solid #000000">
    <tr><td valign="top" style="border-right: 0 solid #000000">
    <p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">
    <table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr><td valign="up">
    <br><br>
    <table align="center" cellpadding="2" width="75%" cellspacing="0" style="border: 1 solid #000000">
    <tr><td align="left" style="border-bottom: 1 solid #000000" bgcolor="#FFFFFF"><p style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Arial" color="#000080"><b>MENU'</b></font></td></tr>
    <tr><td align="left" class="cella" id="c1" onmouseover="accendi('1')" onmouseout="spegni('1')"><a id="l1" href="home.htm">Home</a></td></tr>
    <tr><td align="left" class="cella" id="c2" onmouseover="accendi('2')" onmouseout="spegni('2')"><a id="l2" href="novita.htm">Novità</a></td></tr>
    <tr><td align="left" class="cella" id="c3" onmouseover="accendi('3')" onmouseout="spegni('3')"><a id="l3" href="foto.htm">Foto</a></td></tr>
    <tr><td align="left" class="cella" id="c4" onmouseover="accendi('4')" onmouseout="spegni('4')"><a id="l4" href="chat.htm">Chat</a></td></tr>
    <tr><td align="left" class="cella" id="c5" onmouseover="accendi('5')" onmouseout="spegni('5')"><a id="l5" href="forum.htm">Forum</a></td></tr>
    <tr><td align="left" class="cella" id="c6" onmouseover="accendi('6')" onmouseout="spegni('6')"><a id="l6" href="bacheca.htm">Bacheca</a></td></tr>
    <tr><td align="left" class="cella" id="c7" onmouseover="accendi('7')" onmouseout="spegni('7')"><a id="l7" href="links.htm">Links</a></td></tr>
    <tr><td align="left" class="cella" id="c8" onmouseover="accendi('8')" onmouseout="spegni('8')"><a id="l8" href="webmaster.htm">Webmaster</a></td></tr>
    </table>
    </table>
    </table>
    </body>


    Cosi funzione ed è piu leggibile e gira meglio !
    Ho modificato la tabella del menu,guarda la differenza con le altre e poi prova tu con lo style!



    Wolly
  • T
    Tavrotto
    Utente Attivo
    Iscritto da
    mag, 2002
    Messaggi:
    86

    Re: Ho un problema un po' complesso da spiegare...

    Grazie tante Wolly! Il codice che mi hai dato è a dir poco perfetto! Grazie anche di everlo snellito, ne aveva proprio bisogno. Grazie ancora, ciao!

    dnd*
Devi accedere o registrarti per scrivere nel forum
4 risposte