Onmouseout/over su tabella

[rikardinho90]

Ciao a tutti, avrei bisogno di alcuni chiarimenti riguardo le funzioni onmouseout e onmouseover.

In una pagina di un sito ho questo script:

<script type="text/javascript">

var numeroImmagini=8;
var imageObj = new Image();
for(var i=8; i<=8; i++) {
imageObj.src='immagine_'+i+'.png';
}

function RollMapOn(i)
{
var IMG = document.getElementById("mappa");
IMG.src = "immagine_" + i + ".png";
}
function RollMapOff()
{
var IMG = document.getElementById("mappa");
IMG.src = "mappa.png";
}
</script>

che completato con le dovute funzioni onmouseout e onmouseover nella mappa di un'immagine mi consente di evidenziare diverse parti dell'immagine di partenza (mappa.png)

A questo punto avrei bisogno che al passaggio del mouse sulle determinate aree dell'immagine mappa.png vengano evidenziate anche alcune celle di una tabella che si trova a fianco all'immagine stessa. Ho visto una cosa identica su un sito, non so se posso inserire il link.

Grazie

[cavicchiandrea]

Di norma i link sono ammessi (sempre che non siano siti per adulti di spam, catene multilevel, etc...), ma ritengo che sia un problema di associazione (img A con cella 1)

[rikardinho90]

Ok allora ti posto il link

http://www.tuttitalia.it/

Quando il mouse passa su una regione nella tabella a fianco viene evidenziata la cella con il nome della regione. Non so come collegare le due cose

[Enzaccio]

( la prima porzione è un images preloader, col FOR male impostato però )

Se sono 8 le immagini, facciamo che siano 8 anche le celle da trattare;
nell' html assegnerai loro un ID di questo tipo:

<td id="cella1" ></td>
<td id="cella2" ></td>

e nelle funzioni aggiungi una (o più) istruzione:

function RollMapOn(i)
{
var IMG = document.getElementById("mappa");
IMG.src = "immagine_" + i + ".png";
document.getElementById("cella" + i).style.backgroundColor="lime";
}
function RollMapOff(i) //facciamo entrare l' "i" anche in questa funzione
{
var IMG = document.getElementById("mappa");
IMG.src = "mappa.png";
document.getElementById("cella" + i).style.backgroundColor="";
}

Si presume che nel codice hai già un gestore d' evento onmouseover che passa un numero alla funzione, che lo accoglie come i ; lo dovrà fare anche l' onmouseout .

[rikardinho90]

perfetto, ho risolto e ho aggiunto anche l' "i" nel RollMapOff().
Un'ultima cosa, dov'è l'errore nel preloader?

[rikardinho90]

Ho modificato così e sembra funzioni tutto correttamente:

<script type="text/javascript">

var numeroImmagini=8;
var imageObj = new Image();
for(var i=1; i<=1; i++) {
imageObj.src='immagine_'+i+'.png';
}

function RollMapOn(i)
{
var IMG = document.getElementById("mappa");
IMG.src = "immagine_" + i + ".png";
document.getElementById("cella_" + i).style.color="black";

}
function RollMapOff(i)
{
var IMG = document.getElementById("mappa");
IMG.src = "mappa.png";
document.getElementById("immagine_" + i).style.color="";
}
</script>

e nel preloader ho modificato in questo modo

for(var i=1; i<=1; i++)

[Vindav]

for(var i=0; i<numero immagini; i++)