Variazione del colore di sfondo di un link al passaggio mouse

Gio980 · 26 Giu 2012

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 · 26 Giu 2012

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 · 11 Lug 2012

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.

criric · 11 Lug 2012

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 · 12 Lug 2012

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.

criric · 12 Lug 2012

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

Cerca

Cerca

Variazione del colore di sfondo di un link al passaggio mouse

Gio980

Nuovo Utente

criric

Super Moderatore

Gio980

Nuovo Utente

Allegati

criric

Super Moderatore

Gio980

Nuovo Utente

criric

Super Moderatore

Discussioni simili