Newsgroup: it.comp.lang.javascript
Titolo: Mappa sensibile in una img richiamata da OnMouseower?

ciao a tutti,
 e possibile mappare in immagine che si visualizza successivamente ad un
evento  di tipo 'onmouseower ' ? Io ci ho provato in tutti i modi: forse
usando la proprieta " prototype "?
Grazie a chiunque sappia darmi delle indicazioni..

...

Non sono sicuro di aver capito...
comunque esiste la proprietà VISIBILITY da cui dipende il fatto che
l'oggetto a cui si riferisce effettivamente appaia oppure rimanga nascosto.
La si introduce con uno style sheet, tipo:
#nomeImmagine { visibility : hidden }
in questo modo l'immagine non si vede.
Poi nel tag dell'immagine in questione inserisci l'onmouseover che fa
cambiare il valore di questa proprietà (direttamente o tramite una funzione,
vedi tu), accedendovi via DOM:
document.all.nomeImmagine.style.visibility = "visible" ;
ed ecco che come per magia l'immagine appare solo al passaggio del mouse.
Ovviamente se vuoi che scompaia quando mi allontano col puntatore, devi
impostare un evento onmouseout esattamente inverso.
Questo procedimento generale si può applicare anche ad aree di una imgemap,
però la cosa si complica in quanto devi ricorrere ad un clipping (una specie
di "ritaglio") dell'immagine stessa.
Allora...fai un bel respiro profondo e seguimi:
nello style sheet di prima inseriamo un clipping "innocuo", tanto per far
risultare la proprietà:
#nomeImmagine { visibility : hidden ;
                           clip : rect(0 0 0 0) ;
                        }
OK, ora passiamo allo script, di solito io faccio così:
creo un array
    clipArea = new Array ;
poi una funzione di questo tipo
   function creaClips(top,right,bottom,left) {
        quale = clipArea.lenght ;
al cui interno creo un sub-array
    clipArea[quale] = new Array ;
e ne dichiaro gli elementi di appartenenza
    clipArea[quale][0] = top ;
    clipArea[quale][1] = right ;
    clipArea[quale][2] = bottom ;
    clipArea[quale][3] = left ;
}
a questo punto la richiamo tante volte quante sono le aree che voglio
clippare (ovviamente corripondono alle aree della imagemap), mettiamo siano
due:
creaClips(x,y,z,w)
creaClips(x1,y1,z1,w1)
Fermiamoci qui, per ora.
In pratica, cosa succede?
Creando l'array senza specificarne alcun elemento, la sua lenght sarà 0
quindi la prima volta che chiamo la funzione clipArea, la variabile quale
assumerà valore 0. A questo punto introduco un elemento di questo array cioè
(per quello che si è appena detto) clipArea[0] ma specificando che esso è a
sua volta un array, composto di quattro elementi che assumono come valore
gli argomenti della funzione: in questo primo richiamo top sarà uguale a x,
right a y e così via.
Fatto questo la funzione è stata eseguita e la macchina procede nel parsing
dello script e cosa trova? Un altro richiamo a quella funzione, che pertanto
viene nuovamente eseguita..ma questa volta l'Array ha dentro un elemento per
cui la variabile quale questa volte varrà 1 e di conseguenza si creerà un
altro elemento dell'array, precisamente clipArea[1] che subirà lo stesso
trattamento di clipArea[0] con la differenza ovviamente che questa volta i
valori sono quelli che faccio passare con questo richiamo, quindi
x1,y1,z1,w1.
Ma cosa sono questi valori? Nient'altro che il perimetro dell'area che mi
interessa delimitare, quindi nel nostro caso corrispondono a quelli della
imagemap, salvo che sono messi in un ordine meno intuitivo, come si vede: in
pratica devi fare un giro del rettangolo in senso orario...ascissa del
vertice sinistro, spostamento a destra, spostamento in basso e rientro a
sinistra. Ad esempio se nella imagemap hai un area del tipo:
COORDS="0,0,100,50"
il corrispondente clipping con uno style sheet è fatto così:
clip: area(0,100,50,0)
Tornando allo script, in questo modo abbiamo ottenuto un array (molto
flessibile, dato che possiamo riutilizzarlo tante volte quante sono le aree
che vogliamo creare) che contiene ad ogni elemento quattro variabili che
rappresentano le quattro coordinate che ci servono per clippare l'immagine.
Beh, sono stato abbastanza lungo e magari non ti interessa neppure: facciamo
così, se sei interesssato rispondi che ti faccio una "seconda parte" in cui
ti spiego come utilizzare questi valori insieme all'onmouseover (è la parte
più facile).
NB: tutto questo vale per Exlporer. Con Navigator è possibile, ma cambia la
sintassi per il clipping, oltreché la proprietà visibility (usa HIDE e SHOW)
e ovviamente il DOM (niente "all").
Saluti,
maghetto