Non mi funziona backgroundposition

[Draxent]

Ciao a tutti ho un problema. Vi posto il codice e poi cerco di spiegarvi il problema.

//nell'header
<script language="javascript" type="text/javascript">
  function effetto(i) { 
     if(i == 1) pulsante.input.style.backgroundposition = "50% top"; 
     if(i == 2) pulsante.input.style.backgroundposition = "50% center";
     if(i == 3) pulsante.input.style.backgroundposition = "50% bottom";
  }
</script>
//nello style
#pulsante input { background-position: 50% top; }
//nel body
<div id="pulsante"><input type="image" value="login" src="login.png" 
   onmouseout="effetto(1)" onmouseover="effetto(2)"  onclick="effetto(3)"/></div> 

Quello che vorrei fare è cambiare la posizione dell'immagine di background a seconda se il mouse passa sopra o clicca sul campo type image.
Se cambio manualmente i parametri di #pulsante input { ... } mi funziona ovviamente quindi è sicuramente la parte di javascript che non va. :master:

Aiutatemi!!! Please.

[Xinod]

pulsante e' un id di un div,
quindi per farvi riferimento in maniera crossbrowser puoi solo fare
document.getElementById('pulsante')

input non e' significativo,
document.getElementById('pulsante').getElementsByT agName('input')[0]
indicherebbe quell' input, ma a questo punto dai un id direttamente all' input
e accedivi con
document.getElementById('id_input')

in ultimo backgroundposition, serve il camelCase:
nel caso di attributi di stile con un trattino
il trattino cade e la prima lettera successiva diventa maiuscola
backgroundPosition

inizia ad applicare queste correzioni
ciao

[Enzaccio]

(error post, sorry)

[Draxent]

Grazie per i tuoi consigli, si vede che sono poco ferrato in javascript .
Purtroppo non funziona ancora:

//nell'header
<script language="javascript" type="text/javascript">
  function effetto(i) { 
    pulsante = document.getElementById('pulsante');
    if(i == 1) pulsante.input.style.backgroundPosition = "50% top"; 
    if(i == 2) pulsante.input.style.backgroundPosition = "50% center";
    if(i == 3) pulsante.input.style.backgroundPosition = "50% bottom";
  }
</script>
//nel css
#btn_login { margin-top:20px; background-image: url(login.png); 
background-repeat: no-repeat; width: 97px;  height: 35px; 
background-position: 50% top;}
//nel body
  <input type="image" value="login" id="btn_login" src="x.gif" 
        onmouseout="effetto(1)" onmouseover="effetto(2)"  onclick="effetto(3)"/> 

Ho fatto i cambiamenti che mi avevi chiesto vero?

[Draxent]

Ok scusami ho risolto
Mi ero dimenticato di togliere l'input e di modificare l'id pulsante in btn_login.
Grazie di tutto. Ora ho solo un problemino.
Se mi risolvi anche questo sei un grande
Quando clicco il pulsante dovrebbe cambiarmi lo style, ma non fa in tempo a far vedere l'effetto che subito cambia pagina... non esiste un comando che ritarda il collegamento?

Grazie ancora di tutto

[Draxent]

Scusate ma ho di nuovo lo stesso problema
Questa volta i pulsanti sono 5 e quindi non posso usare la stessa soluzione di prima perchè su qualsiasi pulsante passo mi cambia lo sfondo sempre del primo pulsante.
Quindi ho pensato a questa soluzione ovviamente non funzionante:

<script language="javascript" type="text/javascript">
 function effect(i,varname) { 
   if(varname == "card") button = document.getElementsByClass('card');
   if(varname == "attacks") button = document.getElementByClass('attacks');
   if(varname == "talents") button = document.getElementByClass('talents');
   if(varname == "wardrobe") button = document.getElementByClass('wardrobe');
   if(varname == "description") button = document.getElementByClass('description');
   if(i == 1) button.style.backgroundPosition = "50% top"; 
   if(i == 2) button.style.backgroundPosition = "50% center";
   if(i == 3) button.style.backgroundPosition = "50% bottom";
  }
</script>
<?php
 for($i=0;$i < 5;$i++){
  switch($i){
   case 0: $varname = "card"; break; case 1: $varname = "attacks"; break;
   case 2: $varname = "talents"; break; case 3: $varname = "wardrobe"; break;
   case 4: $varname = "description"; break;
  }
  echo "<td>[img]x.gif[/img]</td>";
 }
?>

Spero sia chiaro
Aiutatemi please!!!

[Xinod]

getElementByClass non esiste nativamente,
lavora con gli id

[Draxent]

Sempre il solito problema
la linea "city = document.getElementById('visual');" mi da errore e non capisco perchè.
Come posso fare ragazzi ?

<script language="javascript" type="text/javascript"> 
function effect(arrow, i) {  
if(arrow == 1) { button = document.getElementById('arrowleft'); x = 0; y = 50; }
if(arrow == 2) { button = document.getElementById('arrowtop'); x = 50; y = 0; }
if(arrow == 3) { button = document.getElementById('arrowbottom'); x = 50; y = 100; }
if(arrow == 4) { button = document.getElementById('arrowright'); x = 100; y = 50; }
city = document.getElementById('visual');
if(i == 1) button.style.backgroundPosition = "50% top"; 
if(i == 2) button.style.backgroundPosition = "50% center"; 
if(i == 3) { 
button.style.backgroundPosition = "50% bottom"; 
city.style.backgroundPosition = x+"% "+y+"%";
}
} 
</script> 

ps: fino a mo siente stati favolosi grazie di tutto!!!

[Xinod]

da qui certo non ti si puo' dire perche'
inizia col postare l' xhtml coinvolto
o, ancora meglio, lascia un link dove vedere la pagina online

[Draxent]

Scusami ma era simile agli esempi precedenti cmq apparte il pezzo javascript nel body c'è questo:

<?php $arrow = "";
for($i=1;$i <= 4;$i++){ 
  switch($i){ 
  case 1: $arrow = "left"; break; 
  case 2: $arrow = "top"; break;                          
  case 3: $arrow = "bottom"; break; 
  case 4: $arrow = "right"; break; 
   } 
 echo "[img]x.gif[/img]"; 
} 
?>