Variazione del colore di sfondo di un link al passaggio mouse

Gio980

Nuovo Utente
2 Apr 2012
5
0
0
Salve a tutti!!
Ho creato una piccola tabella con tante celle, ciascuna delle quali a un colore di sfondo nero. In ogni cella c'è un link. Vorrei creare l'effetto di variazione del colore nero di sfondo della cella, da nero a bianco, al passaggio del mouse sul link. So che si tratta di una istruzione javascript ma non so come impostarla... Qualcuno può essermi di aiuto?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,

se non fosse per il solito explorer potresti risolvere semplicemente con la pseudoclasse hover dei css

HTML:
<style type="text/css">
    table td {
        background-color: black;
    }
    table td:hover {
        background-color: white;
    }
</style>
<table>
    <tr>
        <td><a href="#">link</a></td>
        <td><a href="#">link</a></td>
        <td><a href="#">link</a></td>
        <td><a href="#">link</a></td>
    </tr>
</table>

Una soluzione in javascript invece potrebbe essere questa:

HTML:
<style type="text/css">
    table td {
        background-color: black;
    }
</style>
<script type="text/javascript">
    function color(el,color) {        
        el.style.backgroundColor = color;        
    }
</script>
<table>
    <tr>
        <td onmouseover="color(this,'white')" onmouseout="color(this,'black')"><a href="#">link</a></td>
        <td onmouseover="color(this,'white')" onmouseout="color(this,'black')"><a href="#">link</a></td>
        <td onmouseover="color(this,'white')" onmouseout="color(this,'black')"><a href="#">link</a></td>
        <td onmouseover="color(this,'white')" onmouseout="color(this,'black')"><a href="#">link</a></td>
    </tr>
</table>
 

Gio980

Nuovo Utente
2 Apr 2012
5
0
0
Variazione del colore

Grazie per i consigli!!
Ho applicato il codice, tuttavia esso non si comporta esattamente come dovrebbe. Infatti, quando posiziono il mouse sulla cella essa cambia colore ma rimane, lungo il suo contorno, il colore precedente...perchè? In particolare vorrei che non si vedesse il piccolo margine grigio in alto e a sinistra del rettangolo nero che javascript crea quando il mouse è posizionato sulla cella. Allego una foto del menu che ho creato per rendere l'idea del problema. Grazie.
 

Allegati

  • PrimaDelPassaggioMouse.JPG
    PrimaDelPassaggioMouse.JPG
    32,6 KB · Visite: 322
  • DopoDelPassaggioMouse.JPG
    DopoDelPassaggioMouse.JPG
    56,2 KB · Visite: 361

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non è il javascript che crea il margine, probabilmente hai messo un border alla tabella, prova a toglierlo

invece il testo visto che è nero non si vede su sfondo nero bisogna cambiare colore anche a quello

Se non riesci da solo posta il codice dellla tua tabella e l'eventuale css
 

Gio980

Nuovo Utente
2 Apr 2012
5
0
0
Variazione del colore

Purtroppo il bordo della tabella è disattivato. di seguito scrivo il codice sorgente:
HTML:
<html>
<head>
<title>home</title>
</head>
<script type="text/javascript">
    function color(el,color) {        
        el.style.backgroundColor = color;        
    }
</script>
<script type="text/javascript">
    function color(el,color) {        
        el.style.backgroundColor = color;        
    }
</script>
<body bgcolor="white">
  <table border="0" align="center" width="911"  bgcolor="gainsboro">
          <tr>
             <td onmouseover="color(this,'black')"    onmouseout="color(this,'gainsboro')" >
             <font color="black" size="3" face="Calligraph421 BT">
         HOME</font></a></td>
             <td>
             <a href="UomoCamicie.html">
             <font color="black" size="3" face="Calligraph421 BT">
         CAMICIE</font></a></td>
             <td>
             <a href="UomoPantaloni.html">
             <font color="black" size="3" face="Calligraph421 BT">
         PANTALONI</font></a>
             </td>
             <td>
             <a href="UomoMagliette.html">
             <font color="black" size="3" face="Calligraph421                      BT">
         MAGLIETTE</font></a>
             </td>
             <td>
             <a href="UomoCinture.html">
             <font color="black" size="3" face="Calligraph421 BT">
         CINTURE</font></a>
             </td>
             <td>
             <a href="UomoGiubbotti.html">
             <font color="black" size="3" face="Calligraph421 BT">
         GIUBBOTTI</font></a>
             </td>
             <td>
             <a href="UomoAbiti.html">
             <font color="black" size="3" face="Calligraph421 BT">
         ABITI</font></a>
             </td>
             <td>
             <a href="Contatti.html">
             <font color="black" size="3" face="Calligraph421 BT">
         CONTATTI</font></a>
             </td>
         <tr>
             <td colspan="2" align="left">
             <a href="index.html">
             <font color="black" size="3" face="Calligraph421 BT">            PAGINA INIZIALE</font></a>
             </td>
         </tr>
  </table>
Il codice onmouseover ed onmouseout è applicato solo nel primo link, home.
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Dovresti sitemare un po l'HTML

cmq per i bordi puoi risolvere con la propietà css border-collapse

Inseriscilo nella head insieme al codice javascript:

HTML:
<head>
        <title>home</title>

        <script type="text/javascript">
            function color(el,color) {
                el.style.backgroundColor = color;
            }
        </script>
        <style type="tex/css">
            table {
                border-collapse: collapse;
            }
        </style>
    </head>

PS: Formatta il codice che posti
 
Discussioni simili
Autore Titolo Forum Risposte Data
G [HTML] Variazione di posizione di un tag <a> a passaggio del mouse di un altro tag <a> HTML e CSS 12
gandalf1959 Variazione di un campo input in base al contenuto di un altro campo input inserito dall'utente Ajax 4
V inserimento e variazione di una tabella mysql PHP 1
N Select concatenate Regioni-Province (con Variazione) Javascript 7
N Select concatenate Regioni-Province-Comuni (con Variazione) Javascript 14
P Variazione e personalizzazione dei mime Hosting 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 0
Barierta Testo a comparsa con passaggio del mouse Javascript 13
W Elenco dei link del file presenti in una cartella PHP 2
C Dopo chiusura del tag php la stringa html va a capo PHP 1
R Trovare la Tabella del pagamento su WooCommerce WordPress 0
R Barra del menù principale decentrata Joomla 4
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
felino Stampante Epson XP-322: nessuna traccia del colore nero! Hardware 6
M Controllo del codice fiscale/partita iva PHP 11
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A fread non legge il contenuto del file PHP 4
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Saluti a tutti gli utenti del Forum Presentati al Forum 0
S Trasferire dati sulle pagine del sito PHP 7
V [Buoni amazon]+[Itunes] legali e scontati del 25% Altri Annunci 0
Mastiff_84 Saluto a tutti i membri del forum Presentati al Forum 1
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1
A Ciao popolo del forum Presentati al Forum 0
T Dubbio su costante ROOT, che rappresenti la base directory del sito PHP 4
T Campi static del Controller generico si azzerano ad ogni richiesta PHP 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
felino [Wordpress] Modifica main color del template WordPress 8
D Logout che rientra col tasto indietro del browser PHP 5
felino Bug estetici del nuovo layout Supporto Mr.Webmaster 1
marino51 Restyling del forum 12/2019 - Critiche, segnalazioni e opinioni Discussioni Varie 7
F Opzione cambia aspetto del sito PHP 1
camilia Come posso dividere le grandi dimensioni del file PST? Windows e Software 2
Gabriele15497514 php testo errato durante la lettura del file txt quando lo script viene eseguito contemporaneamente PHP 3
M [PHP] elencare e conteggiare dati di una colonna del db PHP 13
P Nuovo del forum Presentati al Forum 0
K [ASP] Visualizzare nome del file selezionato Classic ASP 3
gandalf1959 Estrazione e visualizzazione del simbolo dell'euro php/mysqli PHP 0
maxnegri Eliminare url index.php con variabili e reindirizzare alla home del sito PHP 7
D [ASP] Autocomplete cerca su 2 campi del db Classic ASP 1
G gioco del tris con i vettori c++ C/C++ 1
F [PHP] modifica del body email con checked PHP 8
U Progettazione del mio Centro Stella Reti LAN e Wireless 0
elpirata [MYSQL] Schedulare evento per update del campo data su tabella MySQL 0
kikdirty Testo e perfezioni il tuo sito dando il massimo del punteggio seo Offerte e Richieste di Lavoro e/o Collaborazione 0
M Non corretta lettura del file php.ini della sezione CLI PHP 3
A Saluti a tutti i componenti del Forum Presentati al Forum 0
G Gianky4747 Nuovo del Forum Presentati al Forum 0
R [PHP] Testo su immagine al passaggio del mouse PHP 2

Discussioni simili