Newsgroup: it.lavoro.professioni.webmaster
Titolo: Eventi su <area shape....

Questa domanda è veramente tosta:
Qualcuno sa se è possibile gestire gli eventi del tag <area shape  ?
Esempio creo una mappa client-side e poi vorrei che al passaggio del mouse
sulle aree che ho definito fose possibile associare lo swap di una immagine
o di un layer o altro
E' possibile?
E' difficile?
E' impossibile?
(non rispondete "la seconda che hai detto" pls)
Carlo

 wrote in message
9of52g$2dh$1...@fe2.cs.interbusiness.it...



Fireworks puň andare bene se le aree sono rettangolari, m aquando si tratta
delle regioni d'Italia diventa un problema.
o no?
Carlo

, 
nospam...@lunet.it
 
says...

La quarta! :-)))
Skerzi a parte: qui siamo un pochettino OT, ti rispondo comunque (anche 
perché la risposta la trasformerò in script per il mio sito), ma è una 
domanda da postare in it.comp.www.html o (meglio) in 
it.comp.lang.javascript.
Questo è lo script, dopo ti spiego come devi usarlo.
----------------------------------------- begin -------
<HTML>
<HEAD>
	<TITLE>Roll-over Livelli</TITLE>
<SCRIPT>
<!--
/* --- Script by courtesy of 
www.jsdir.com
 --- */
var 
pfx=document.layers?"document.layers.livello":document.all?"document.all
.livello":"document.getElementById('livello";
var sfx=document.layers?"":document.all?".style":"').style";
var l = new Array()
 
function inizia(){
	for (i=0;i<3;i++)
		l[i]=eval(pfx+i+sfx);}
 
function Show(n){
	l[n].visibility='visible';}
function unShow(n){
	l[n].visibility="hidden";}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#000000" ALINK="#000000" 
VLINK="#000000" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" 
MARGINHEIGHT="0" onLoad="inizia()">
<DIV ID="livello0" 
STYLE="position:absolute;top:100;left:100;width:100;height:20;visibility
:hidden;z-index:0;background-color:#ff0000">###########</DIV>
<DIV ID="livello1" 
STYLE="position:absolute;top:100;left:100;width:100;height:20;visibility
:hidden;z-index:0;background-color:#00ff00">###########</DIV>
<DIV ID="livello2" 
STYLE="position:absolute;top:100;left:100;width:100;height:20;visibility
:hidden;z-index:0;background-color:#0000ff">###########</DIV>
<DIV ID="mappa" 
STYLE="position:absolute;top:100;left:100;width:200;height:20;visibility
:visible;z-index:1">
<A HREF="#" onMouseOver="Show(0)" onMouseOut="unShow(0)">Livello ZERO
</A> <BR>
<A HREF="#" onMouseOver="Show(1)" onMouseOut="unShow(1)">Livello UNO</A> 
<BR>
<A HREF="#" onMouseOver="Show(2)" onMouseOut="unShow(2)">Livello DUE</A> 
<BR>
</DIV>
</BODY>
</HTML>
---- end -----------------------------------------
[ --- ricostruisci le righe lunghe! --- ]
Provalo e verifica che funziona per NN4+ IE4+
In pratica è un rollover di livelli (più semplice di così non riesco a 
scriverlo :-)
Dalla risposta che hai dato a Lele immagino che vuoi fare il rollover 
delle regioni in una cartina dell'italia (colorare la regione su cui sei 
sopra con il mouse).
Lo script che ti ho dato fa un rollover di livelli: passando sui links 
dovrebbero sovrapporsi i cancelletti SUL SOLO LINK "Livello ZERO".
Ora veniamo a te.
L'idea è che tu costruisci 22 immagini:
- una di queste sarà un'Italia con i *contorni* delle regioni mappati da  
SHAPES
- le altre 21 saranno immagini *della*stessa*grandezda* ma ognuna 
conterrà solo una regione colorata (tagli via tutte le altre)
Tutte queste immagini le metti una in ogni livello: le prime 21 nei 
<DIV ID="livello-" ...>
e l'ultima (quella con i contorni) nel <DIV ID="mappa"...>, quest'ultima 
la fai diventare mappa.
Nota che i livelli sono tutti POSITION:ABSOLUTE e posizionati tutti alla 
stessa coordinata, infatti e rendi visibili anche tuti i livelli 
nascosti dovrebbe ricomporsi l'italia con le regioni colorate (21 
livelli) ed i contorni (ultimo livello in cui farai trasparente lo 
sfondo).
Metti gli HREF e gli event-handlers onMouseOver e onMouseOut negli <AREA 
...> della mappa e numerali coerentemente con la sequenza dei livelli 
(aosta=0 - piemonte=1 - liguria=2 ...)
Passando sulle regioni della mappa (l'immagine contornata) dovrebbe 
diventare visibile il livello corsispondente (che sta sotto per lo z-
index) ed ottieni l'effetto voluto.
Non l'ho provato con la mappa, ma dovrebbe funzionare al 99% :-)
Basta giocarci un po' per mettere i vari pezzi al posto giusto.
-- 
Ciao, Riccardo
------------------------------------------------------------------------
WebMaster: ----> 
http://www.jsdir.com
 <---- (aka 
http://www.jspoint.it
)
              All the JavaScript you need
------------------------------------------------------------------------
               Nessun traguardo è abbastanza lontano.
------------------------------------------------------------------------

 wrote in message
9ofpkj$fn7$1...@fe1.cs.interbusiness.it...


Non ho parole!
mi devo complimentare.
E ringraziarti di cuore.
Non mi fraintendere, m apenso che suggerirò al cliente un'altra soluzione
(un po' più semplice)
Purtroppo so che non sarebbe in grado di apprezzare la complessità dellavoro
e quindi l'aumento di prezzo che sarei tenuto a fargli.
Tu quanto chiederesti per un lavoro del genere?  (pura curiosità)
Carlo

, 
nospam...@lunet.it
 
says...

Non è difficile quello che ti ho scritto.
Quanto al costo: un prezzo te l'ho già chiesto ed è nella seconda riga 
subito dopo <SCRIPT>.
Oltretutto lo script l'ho provato e funziona, se poi vuoi che ti faccia 
io l'implementazione... beh non sono caro, mandami la tua pagina HTML e 
la mappa e continuiamo in privato :-)
