effetto rollover su button

[axxe16]

Ciao a tutti,
ho un problemino. Ho un tag button con come background un immagine di un pulsante ( fra un tag ell'altro una gif trasparente)

così:
<button type="submit" style="cursorointer; background: url(images/button.jpg) center no-repeat #81071C; border:none;">
[img]images/spacer-head-inner.gif[/img]
</button>

Ora vorrei applicargli l'effetto rollover sostituendo il background quando ci si passa sopra con il mouse...
pensavo bastasse una cosa così ma non funge
button:hover {background-image:url(images/button_hover.jpg)}

consigli?

[salasir]

Se stai parlando di IE, è ovvio. IE gestisce l'hover solo sul tag <a>.

[axxe16]

bhe si su explorer ci si deve accontentare ma visto che è una versione non definitiva mi andava bene fosse visibile su firefox e poi in un secondo momento avrei montato il js per ie6 (a proposito IE7 immagino supporto la pseudoclasse hover anche per button?)

[Another-Life]

salasir puoi postare perfavore lo script java per abilitare il rollover anche su altri tag per IE?? thx^^

[salasir]

Io utilizzo questo codice:

sfHover = function() {
	var sfEls = document.getElementsByTagName("p");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) { 
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Il primo esempio serve per gestire l'hover su un tag generico, mentre il secondo per un tag all'interno di un "id" specifico.
Ovviamente devi duplicare il pezzo per ogni tag che vuoi gestire.

Poi è necessario duplicare le dichiarazioni nel CSS per ogni coppia tag/hover trasformandolo in classe sfhover:

#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }

[Another-Life]

Ovviamente devi duplicare il pezzo per ogni tag che vuoi gestire.

Tramite linguaggio lato server si puo evitare di dover ripetere lo script ogni volta??

Poi è necessario duplicare le dichiarazioni nel CSS per ogni coppia tag/hover trasformandolo in classe sfhover:

Non ho ben capito questa cosa.....oltretutto come mai hai dichiarato la proprietà left: auto;??

[salasir]

Originariamente inviato da Another-Life
Tramite linguaggio lato server si puo evitare di dover ripetere lo script ogni volta??

Ma ... js viene eseguito sul client ... quindi cosa vorresti fare lato server? :master:

Non ho ben capito questa cosa.....oltretutto come mai hai dichiarato la proprietà left: auto;??

Quando dichiari la pseudoclasse :hover su un tag diverso da <a> viene gestito per esempio da FF ma IE (che non lo gestisce) deve essere "aiutato" da js. Questa funzione assegna "al volo" una classe al tag in oggetto assegnandogli "sfhover" che va definito nel CSS con le stesse caratteristiche della pseudoclasse.

La proprietà left:auto è solo un esempio che ho tratto da un mio CSS per un menù.

Spero di essere stato + chiaro.

[Another-Life]

Siamo d'accordo sul fatto che js sia un linguaggio lato client ma rimane pur sempre codice.Da qui la domanda: Posso generare codice js tramite linguaggio lato server??

p.s: Altra curiosità: Hai chiamato la funzione sfHover....sf sta per scriptfunction??

[salasir]

Originariamente inviato da Another-Life
Siamo d'accordo sul fatto che js sia un linguaggio lato client ma rimane pur sempre codice.Da qui la domanda: Posso generare codice js tramite linguaggio lato server??

Beh, penso proprio di sì, come puoi generare del codice html puoi creare la pagina inserendo pezzi js. Ma non riesco a capire il motivo di generare dinamicamente il codice... :master:

p.s: Altra curiosità: Hai chiamato la funzione sfHover....sf sta per scriptfunction??

Non l'ho chiamata io. &Egrave; codice che ho copiato da qui:
Sons of Suckerfish

Quindi è probabile che piuttosto che ScriptFunction, stia per Suckerfish

[Another-Life]

Per quanto riguarda la prima perplessita che hai stavo pensando di creare uno script in Php che generasse in automatico quel codice js dove l'unico cambiamento da effettuare fosse la scelta del tag da gestire...tutto qui...anche se pensadoci bene è piu semplice andare di copia/incolla..lol.

Suckerfish..