Newsgroup: it.comp.lang.javascript
Titolo: css per colore di sfondo (simulazione di swapimage)

ciao a tutti,
ho una questione js che mi fa uscire di testa....
in pratica io ho un bottone .gif con scritto "pippo". l'immagine č
trasparente.
di default il colore dello sfondo dell'immagine č #FFFFFF.
se vado sopra all'immagine devo poter scambiare lo sfondo (dell'immagine)
con #FFFF00.
in pratica "simulo" uno swap image, cambiando il colore dello sfondo
dell'immagine (ma caricando una sola immagine).
ebbene, ci sono riuscito cosě, ma č ben poco elegante e devo scrivere "tons
of code" in + :
<img src="pippo.gif" onMouseOver="this.style.background='#FFFF00'"
onMouseOut="this.style.background='#FFFFFF'" name="tastino">
funziona egregiamente, ma considerato che ho quaranta di questi tastini,
diventa davvero un casotto tutto sto codice inutile in +.
ho pensato di creare quindi una funzione, passando il nome dell'immagine (i
colori di swap sono gli stessi per tutte le immagini):
function swapColors(iName) {
    che cavolo devo scrivere?
}
nell'immagine...
<img src="pippo.gif" onMouseOver="swapColors(
this.name
);"
onMouseOut="swapColors(
this.name
);" name="tastino">
------------
ma soprattutto........
e se io volessi usare un'immagine come sfondo (es. sfondo.gif), anzichč un
colore?
son davvero in un ginepraio!...
spintop

Spero ti possa andare bene anche questo tipo di soluzione, anche se non č
come l'avevi richiesta:
Inserisci nella head il css:
<style type="text/css">
.butt{
 background-color:#ff0000;      oppure ( background-image:
url(percorso-immagine);)
}
.butt2{
 background-color:#00ff00;
}
</style>
oppure lo importi.
il bottone lo scrivi:
<img src="pippo.gif" class="butt" onMouseOver="this.className='butt2'"
onMouseOut="this.className='butt'" name="tastino">
Spero di essere stato di aiuto.
ciao
Fausto

 ha scritto nel messaggio

***
altro che!
grazie!
spintop

macchč.... non funzika.
:o(
il fatto č che credo che io sia "costretto" a creare gli stili css via
javascript...
infatti creando gli stili e chiamandoli da js non funziona, mentre creandolo
e chiamandolo completamente da js funziona....
sob...
forse sto trascurando qualcosa....
di certo c'č che "this.style.background" funziona in js
ho provato con "this.style.background:image" ma explorer s'incavola come una
pantera...
spintop

Non capisco quale possa essere il problema
prova a vedere
http://www.dreamdesign.it/test/pippo.htm
Mi funziona sia con colori che con immagini di sfondo
Per farmi capire meglio il contesto in cui andrebbero inseriti questi
bottoni posta un link di prova.
ciao
Fausto

 e se io volessi usare un'immagine come sfondo (es. sfondo.gif), anzichč un colore?
Ah, non c'č problema, basta inserire url("sfondo.gif") nel css.
MaRoK

 ha scritto nel messaggio
news:HkFka.102489$i26.3...@news2.tin.it...

***
ah vero!!! non ci avevo pensato!
il problema del cross-browser "fortunatamente" non mi si pone in quanto č
un'interfaccia che usa IFRAME e altre robe compatibili solo con IE.
certo perň, io non so quanti qua lo fanno per lavoro, ma che due palle fare
due versioni diverse per browsers diversi!
alla fine non conviene neanche farlo, per cui il sito (che potrebbe essere
anche migliore e + parametrizzato nel lay-out) ne esce sacrificato...... e
io pure....
sob....
grazie a te e a phaphee!
vabč..... provo il css e vi dico.
spintop

IE non ne vuol sapere....
peccato, era cosě semplice...... sob...
:o(
spintop

 spintop
***
errata corrige.
FUNGE !!!!!!
heheheh...... mancava un ":"
che sbadato che sono!
grazie, questa è davvero da "Preferiti" :o)
spintop

 due versioni diverse per browsers diversi!
No, non è il caso, la seconda (un po' meno pulita) funziona su entrambi,
dunque basta scrivere la seconda...
L'unico senza speranza è il Netscape4, ma lì occorrerebbe come minimo un esorcista...
(cmq il fatto che non cambi colore non toglie navigabilità al sito, anche su Ns4)
MaRoK

 grazie, questa č davvero da "Preferiti" :o)
Figurati! :)
Se vuoi sapere di piů sull'uso dei css
ti consiglio 
http://www.w3.org/TR/REC-CSS2/indexlist.html
Molte volte permettono di risolvere in modo semplice e "leggero"
un bel po' di grattacapi!
MaRoK