cambiare colore bordo div onMouseOver

**Lomio** · 08-09-2010, 16:17

Salve a tutti, sto costruendo una scacchiera usando Javascript e HTML.
Vorrei che al passaggio del mouse su ogni singolo div che corrisponde ad una casella cambiasse il colore del bordo!!!
Ho già provato a stutturare il tutto...ma con scarsi risultati, vi posto qui sotto il tutto:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Dama</title>
    
        <style>
	
	body {
	    background-color:#6699FF;	
	}	
	
        #dama {
            width       : 576px;
            height      : 576px;   
        }
        
        #dama div {
            float       : left;
            width       : 70px;
            height      : 70px;
            border      : 1px solid #767676;
        }

	.nero {
	    background-color	: #000000;	
	    color		: #ffffff;
	}

	.bianco {
	    background-color	: #ffffff;
	}
        </style>

	<SCRIPT type="text/javascript">
	   function selezionaCasella(id) {
	      getElementById(id).style.border="2px solid red";
	   }
	</SCRIPT>
    </head>

<body>

    <div id="dama">
	<SCRIPT type="text/javascript">
	
		for(var j = 0; j < 8; j++) {
		   for(var i = 0; i < 8; i++) {
		      var divNero = '<div class="nero" id="'+i+''+j+'" onMouseOver="selezionaCasella('+i+''+j+');">'+j+', '+i+'</div>';
		      var divBianco = '<div class="bianco" id="'+i+''+j+'" onMouseOver="selezionaCasella('+i+''+j+');">'+j+', '+i+'</div>';	
			if ((i + j) % 2 == 0) {
			   document.write(divNero);
			} else {
			   document.write(divBianco);
			}		
		   }	
		}

	</SCRIPT>
    </div>

</body>
</html>

Grazie a tutti in anticipo!!!!

**Lomio** · 08-09-2010, 17:19

Il problema del post precedente l'ho risolto, mancava il document davanti al getElementById.
Adesso il problema è un altro, intanto vi posto il codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Dama</title>
    
        <style>
	
	body {
	    background-color:#6699FF;	
	}	
	
        #dama {
            width       : 578px;
            height      : 578px;   
        }
        
        #dama div {
            float       : left;
            width       : 70px;
            height      : 70px;
            border      : 1px solid #767676;
        }

	.nero {
	    background-color	: #000000;	
	    color		: #ffffff;
	}

	.bianco {
	    background-color	: #ffffff;
	}
        </style>

	<SCRIPT type="text/javascript">
	   function selezionaCasella(id) {
	      document.getElementById(id).style.border="1px solid red";
	   }
	   function deselezionaCasella(id) {
	      document.getElementById(id).style.border="1px solid #767676";	
	   }
	</SCRIPT>
    </head>

<body>

    <div id="dama">
	<SCRIPT type="text/javascript">
	
		for(var j = 0; j < 8; j++) {
		   for(var i = 0; i < 8; i++) {
		      var id = j+''+i;	
		      var divNero = '<div class="nero" id="'+id+'" onMouseOver="selezionaCasella('+id+');" onMouseOut="deselezionaCasella('+id+');"></div>';
		      var divBianco = '<div class="bianco" id="'+id+'" onMouseOver="selezionaCasella('+id+');" onMouseOut="deselezionaCasella('+id+');"></div>';	
			if ((i + j) % 2 == 0) {
			   document.write(divNero);
			} else {
			   document.write(divBianco);
			}		
		   }	
		}

	</SCRIPT>
    </div>

</body>
</html>

il problema nuovo è che l'onMouseOver/out della prima riga non funziona e mi genera questo tipo di errore:
Uncaught TypeError: Cannot read property 'style' of null

Qualche aiuto?!?!Grazieeee

**cavicchiandrea** · 08-09-2010, 19:34

prova a studiarti questo http://javascript.html.it/demo/javas...87/esempio.htm

Discussione: cambiare colore bordo div onMouseOver

Strumenti discussione

Ricerca discussione

Visualizza

cambiare colore bordo div onMouseOver

RISOLTO

Permessi di invio