Javascript - [JS]Problema con il DOM

07/11/09 13:13

Salve,
provate ad andare su facultates.altervista.org/… noterete che quando si passa il mouse sopra/fuori al bottone home tutto funziona correttamente mentre se si fa lo stesso sul bottone registrati non va. Posto i codici:

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" href="stile.css"/>
<title>Facultates</title>
</head>

<body>

<div id="container">

	<div id="header">
	<form action="index.html"><input name="Bottone_home" type="image" src="banner.jpg" alt="Home" title="Home"/></form>	
	</div>
	
	<div id="navigator-top">
	
	<span id="bottone-top" name="home" onclick="location.href='index.htm';" onmouseover='document.getElementById("bottone-top").style.background = "url(bottone2.png)";' onmouseout='document.getElementById("bottone-top").style.background = "url(bottone1.png)";'>Home</span>

	<span id="bottone-top" name="resgitrati" onclick="location.href='registra.htm';" onmouseover='document.getElementById("bottone-top").style.background = "url(bottone2.png)";' onmouseout='document.getElementById("bottone-top").style.background = "url(bottone1.png)";'>Registrati</span>
	</div>

</div>

</body>

</html>

stile.css :

body{
	text-align: center;
	background-image: url(bg.png);
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: medium;
}

#container{
	width: 804px;
	margin: auto;
	text-align: left;
}

#header{
	width: 800px;
	border: 2px solid black;
}

#navigator-top{
	text-align: center;	
	border:2px solid black;
	border-top: 0px;
}

#bottone-top{
	padding-left: 4px;
	padding-right: 4px;
	margin-left: -5px;
	color: white;
	width: 100px;
	background-image: url(bottone1.png);
	background-repeat: repeat-x;
	cursor: pointer;
}

il problema e che il codice js non seleziona il bottone che voglio ma sempre il primo, come mai?

aaa

07/11/09 13:46

Nophiq

Il problema che è i due bottoni hanno lo stesso id. Metti "bottone-home" e "bottone-registrati" per differenziarli. Ricordati inoltre che gli id devono essere unici nella pagina.

Ciao

aaa

07/11/09 13:58

peppiniello

certo così funziona ma non mi pare una soluzione "pulita"

aaa

07/11/09 23:05

Andrey

Postato originariamente da peppiniello:

certo così funziona ma non mi pare una soluzione "pulita"

Certo che è pulita, soprattutto è corretta.

Se preferisci usare lo stesso identificativo per due o più elementi diversi, devi usare una classe, non un id.
Inoltre ti consiglio di gestire il cambio di immagine con i CSS, viene molto più pulito e più leggero. Basta usare lo "stato" :hover.

Ad esempio se hai posto

<span class="bottone">Home</span>

nel CSS scriverai:

.bottone:hover {background-image: url('Indirizzo_Immagine.jpg')}

Ultima modifica effettuata da Andrey 07/11/09 23:07

aaa