Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - [JS]Problema con il DOM
Forum - Javascript - [JS]Problema con il DOM

Avatar
peppiniello (Normal User)
Newbie


Messaggi: 5
Iscritto: 07/11/2009

Segnala al moderatore
Postato alle 14:13
Sabato, 07/11/2009
Salve,
provate ad andare su http://www.facultates.altervista.org/index.htm   ... 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
Codice sorgente - presumibilmente Javascript

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" type="text/css" href="stile.css"/>
  7. <title>Facultates</title>
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div id="container">
  13.  
  14.         <div id="header">
  15.         <form action="index.html"><input name="Bottone_home" type="image" src="banner.jpg" alt="Home" title="Home"/></form>    
  16.         </div>
  17.        
  18.         <div id="navigator-top">
  19.        
  20.         <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>
  21.  
  22.         <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>
  23.         </div>
  24.  
  25. </div>
  26.  
  27. </body>
  28.  
  29. </html>




stile.css :
Codice sorgente - presumibilmente Plain Text

  1. body{
  2.         text-align: center;
  3.         background-image: url(bg.png);
  4.         font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  5.         font-size: medium;
  6. }
  7.  
  8. #container{
  9.         width: 804px;
  10.         margin: auto;
  11.         text-align: left;
  12. }
  13.  
  14. #header{
  15.         width: 800px;
  16.         border: 2px solid black;
  17. }
  18.  
  19. #navigator-top{
  20.         text-align: center;    
  21.         border:2px solid black;
  22.         border-top: 0px;
  23. }
  24.  
  25. #bottone-top{
  26.         padding-left: 4px;
  27.         padding-right: 4px;
  28.         margin-left: -5px;
  29.         color: white;
  30.         width: 100px;
  31.         background-image: url(bottone1.png);
  32.         background-repeat: repeat-x;
  33.         cursor: pointer;
  34. }



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

PM Quote
Avatar
Nophiq (Founder Member)
Expert


Messaggi: 537
Iscritto: 15/11/2004

Segnala al moderatore
Postato alle 14:46
Sabato, 07/11/2009
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


Francis Bacon: "Sapere è potere"
PM Quote
Avatar
peppiniello (Normal User)
Newbie


Messaggi: 5
Iscritto: 07/11/2009

Segnala al moderatore
Postato alle 14:58
Sabato, 07/11/2009
certo così funziona ma non mi pare una soluzione "pulita"

PM Quote
Avatar
Andrey (Normal User)
Rookie


Messaggi: 29
Iscritto: 06/10/2009

Segnala al moderatore
Postato alle 0:05
Domenica, 08/11/2009
Testo quotato

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
Codice sorgente - presumibilmente Plain Text

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



nel CSS scriverai:
Codice sorgente - presumibilmente Plain Text

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


Ultima modifica effettuata da Andrey il 08/11/2009 alle 0:07


I computer sono incredibilmente veloci, accurati e stupidi. Gli uomini sono incredibilmente lenti, inaccurati e intelligenti. Insieme sono una potenza che supera l'immaginazione. - Cit. Albert Einstein.
PM Quote