Newsgroup: it.comp.lang.javascript
Titolo: rollover immagine sfondo immagine

Salve,
ho questo problema.
devo fara un classicissimo rollover tra due immagini e fin qui tutto ok.
solo che mentre faccio il rollover dovrei cambiare anche l'immagine di 
sfondo della cella.
Ho realizzato un funzione in javascript che mi cambia la classe della 
tabella in modo da caricare l'altra immagine. e fin qui tutto ok
IL PROBLEMA sta che effettuando la funzione javascript che cambia la classe 
css mi si crea l'effeto fastidioso del caricamento dell'immagine
Come potrei cambiare lo sfondo di una cella in maniera da non avere lo 
"sfarfallamento" dell'immagine nel precaricamento?
in pratica ci vorrebbe qualcosa come un rollover classico con il 
precarimaneto dell'immagine prima dell'esecuzione, come potrei fare?
grazie mille. 

gia mia accodo pure io, ho sempre cercato di fare un rollover di un'immagine 
di sfondo ma nn ci sono mai riuscito....aspetto la risposta di qualche 
luminare pure io.....
"cz" <dario> ha scritto nel messaggio 
news:4a4730c7$0$1114$4faf...@reader4.news.tin.it...


 precarimaneto dell'immagine prima dell'esecuzione, come potrei fare?
scusa la domanda stupida, ma: hai già provato a precaricare l'immagine di 
sfondo? Risultati?

 sfondo? Risultati?
Guarda il codice
====
CSS
====
.style3 {background-image: url('images/newgrafica/sfondocar.gif'); 
background-repeat: no-repeat;; background-position: left}
.style3_1 {background-image: url('images/newgrafica/sfondocar_1.gif'); 
background-repeat: no-repeat; background-position: left; }
==========
Javascript
==========
var Img2On = new Image();
Img2On.src = "images<%=session("lingua")%>/newgrafica/catalogo_1.gif";
var Img2Off = new Image();
Img2Off.src = "images<%=session("lingua")%>/newgrafica/catalogo.gif";
var Img3On = new Image();
Img3On.src = 
"images<%=session("lingua")%>/newgrafica/VisualizzaCarrello_1.gif";
var Img3Off = new Image();
Img3Off.src = 
"images<%=session("lingua")%>/newgrafica/VisualizzaCarrello.gif";
?
function MOver(picimage)//funzione che si attiva con OnMouseOver
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function MOut(picimage)//funzione che si attiva con OnMouseOut
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
}
function cambio_css(name,id) {document.getElementById(id).className=name;}
====
HTML
====
<a href="<%=nomepaginaC%>" 
onMouseOver="MOver('Img3');cambio_css('style3_1','SfondoCar')" onMouseOut = 
"MOut('Img3');cambio_css('style3','SfondoCar');">
Il problema c'� solamente se chiamo la funzione cambio_css perche le 
immagini del rollover Mover, Mout vengono precaricate prima.
Dovrei precaricare le immagini che chiamo con cambio_css, ma come faccio? 
Visto che io cambio la classe che contiene le immagini?
?

 faccio? Visto che io cambio la classe che contiene le immagini?
forse non ho capito, ma non ti basta precaricare le 2 immagini del css?
 var imgstyle3=new Image(); imgstyle3.src=...;
 var imgstyle3_1=new Image(); .......
in questo modo dovrebbe già trovarle in cache quando cambi css.
Altrimenti anziché usare css cambia direttamente l'immagine di sfondo 
assegnandogli l'src dell'immagine precaricata.

 assegnandogli l'src dell'immagine precaricata.
infatti volevo adottare questa tecnica....
ma forse per cambiare lo sfondo di un <td id="colonna"> sto sbagliando 
qualcosa.....
function cambio_cssOver(name,id) {
  document.getElementById(id).style.backgroundImage = 
matriceprecaricate[1].src
 }
????
  document.getElementById(id).style.backgroundImage = 
matriceprecaricate[1].src � cosi?

 in questo modo dovrebbe già trovarle in cache quando cambi 
css.


Cristiano guarda dove sono arrivato.


 


function cambio_cssOut(picimage,id) {
    Picture_Out = eval(picimage 
+"Off.src")
    
document.getElementById(id).style.backgroundImage = Picture_Out 

}


function cambio_cssOver(picimage,id) 
{
    
Picture_Over = 
eval(picimage +"On.src")
    
document.getElementById(id).style.backgroundImage = 
Picture_Over
}


<td colspan="2" width="460" class="style3" 
id ="SfondoCarrello"> 
    <a href="<%=nomepaginaC%>" 
onMouseOver="MOver('Img3');cambio_cssOver('Img4','SfondoCarrello')" onMouseOut = 
"MOut('Img3');cambio_cssOut('Img4','SfondoCarrello');">
    
    <img  name="Img3"  
SRC="images/newgrafica/VisualizzaCarrello.gif">
    

</a>


 


mi da l'errore 
argomento non 
valido  in questa linea di codice.!!!!!

document.getElementById(id).style.backgroundImage = 
Picture_Over    


 





     Picture_Out = eval(picimage +"Off.src")
eval è meglio evitarlo. puoi usare un qualcosa del tipo
 Picture_Out=window[picimage+"Off.src"];
 
http://snook.ca/archives/javascript/global_variable/

No Cristiano
problema persiste....ho cambiato la variabile id con nomeID
 var Img4On = new Image();
 Img4On.src = 
"images<%=session("lingua")%>/newgrafica/sfondocarrello_1.gif";
 var Img4Off = new Image();
 Img4Off.src = "images<%=session("lingua")%>/newgrafica/sfondocarrello.gif";
 function cambio_cssOver(picimage,nomeID) {
  Picture_Over =eval(picimage +"On.src")
  document.getElementById(nomeID).style.backgroundImage = Picture_Over
 }
  <td colspan="2" width="460" class="style3" id ="SfondoCarrello" 
name="Img4" >
    <a target="_top" href="<%=nomepaginaC%>" 
onMouseOver="MOver('Img3');cambio_cssOver('Img4','SfondoCarrello')" 
onMouseOut = "MOut('Img3');cambio_cssOut('Img4','SfondoCarrello');">
           <img  name="Img3" 
SRC="images<%=session("lingua")%>/newgrafica/VisualizzaCarrello.gif" 
border="0">        </a>
eppure sembra tutto giusto anche se mi da sempre l'errore "Argomento non 
valido"  anche cambiando il valore id con nomeID
in questa linea di codice
document.getElementById(nomeID).style.backgroundImage = Picture_Out
sono nel pallone :-( ma dove sbaglio!!! 

 document.getElementById(nomeID).style.backgroundImage = Picture_Out
cosa dice la console javascript di firefox?

"Cristiano Larghi" cosa dice la console javascript di firefox?
per la verit� stavo verificando con IE 8 cmq provando su firefox
mi dice
Avviso: Errore nell'interpretazione del valore della propriet� 
'background-image'.  Dichiarazione tralasciata.
ma cmq nn da errori javascript ma nn carica l'immagine nello sfondo!!!! 

"Cristiano Larghi" cosa dice la console javascript di firefox?
Cristiano, ti do altre info
in pratica sto vedendo che
 function cambio_cssOver(picimage,nomeID) {
  Picture_Over =eval(picimage +"On.src");
  alert(picimage);
  document.getElementById(nomeID).style.backgroundImage = Picture_Over;
  alert(picimage);
 }
fa vedere solo la prima alert e non la seconda...senza dare errori per�!!!!

"Cristiano Larghi" cosa dice la console javascript di firefox?
Scusa mi dice
Riga: 859
Errore: Argomento non valido.
function cambio_cssOver(picimage,nomeID) {
Picture_Over =eval(picimage +"On.src")
alert(Picture_Over)
859 -> document.getElementById(nomeID).style.backgroundImage = Picture_Over 
<-
alert(picimage)
}

 cosa dice la console javascript di firefox?
per dovere di cronaca il problema andava risolto mettendo
"url("+Picture_Out+")"
ovvero il costrutto url