Newsgroup: it.comp.lang.javascript
Titolo: Evidenziare una parte di un'immagine tramite codice JS

  Ciao,
e' da poco tempo che ho iniziato a fare qualcosetta con JS e mi trovo
davanti ad un problema che non riesco a risolvere. Ho una pagina Web divisa
in 2 frame; quello a sx contiene un elenco di comuni, quello a dx una
cartina geografica. Vorrei riuscire a fare in modo che, al passaggio del
puntatore del mouse sul nome di un comune, questo venisse (in qualunque
modo; un cerchio, un quadrato, un fx fade, ...) evidenziato sulla cartina.
L'unico modo che finora ho trovato per fare una cosa del genere, e' quello
di: realizzare 2 immagini (evidenziato on/off) per ogni comune, spezzare
l'immagine della cartina geografica in tanti rettangolini, gestire una ad
una tutte le immagini e rinunciare ad uscire di casa per i prossimi 13 anni.
   Vi prego, aiutatemi voi, maghi del JavaScript!

 modo; un cerchio, un quadrato, un fx fade, ...) evidenziato sulla cartina.
Anch'io avevo lo stesso problema, e comunque poi ho cambiato completamente
metodo, perche' i comuni erano troppi, e non avevo alcuna intenzione di
usare i frames.
Pero' potresti far comparire un layer sulla mappa (solo per browser dalla
versione 4 in su) al passaggio del mouse sul nome del comune.
In questo senso Dreamweaver aiuta tantissimo.
--
ciao
gelty
--
Visita 
http://www.sifor.it
Elimina *toglimi* per le risposte

    Vi prego, aiutatemi voi, maghi del JavaScript!
Io ho optato per un'immagine (una manina) in un DIV inizialmente
nascosto, ogni volta che passo su un comune passo al div il comando di
diventare visibile e di spostarsi in una precisa posizione del frame.
L'applicazione la trovi
all'URL:http:\\
www.agritour.it
\agriturismi\agrimain.html e poi cerca la
lista degli agriturismi di Mantova per avere la pagina completa e
funzionante per una demo.
-- 
        _
       //\
 Bye, //--\ndrea
(
http://www.geocities.com/SiliconValley/Peaks/9739
)


Dovresti utilizzare il CSS (ma non è assolutamente necessario).
In pratica, crei una immagine di tipo gif (es. cerchietto rosso con fondale
trasparente, chiamato cerchio.gif); definisci la posizione in pixel della
cartina in termini assoluti (e non relativi*); definisci una coppia di
coordinate per ogni comune da evidenziare.
Infine, basta fare un piccolo script che, all'evento "onmouseover" sul nome
del comune, fornisce le relative coordinate al layer dell'immagine.
* Nel senso che se la cartina si sposta sullo schermo a seconda della
grandezza delle finestre o del tipo di browser, il tuo sistema di
riferimento cartesiano se ne va a quel paese.
Ti faccio un esempio (la cartina metticela tu e non scordarti di passare):
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- ;
function evidenzia(x,y) {
 var a=eval("document.all.cerchietto.style");
 a.left=x;
 a.top=y;
 a.visibility="visible";
}
function nascondi() {
 document.all.cerchietto.style.visibility="hidden"
}
//  end hide -->
</SCRIPT>
</BODY>
<DIV ID="cerchietto" style="position:absolute; top:300; left:300"><img
src="cerchio.gif"></DIV>
<TABLE>
 <TR>
  <TD>
  <div Id="comune1" onmouseover="evidenzia(100,100)"
onmouseout="nascondi()">
   <A HREF="">Comune1</A>
  </div>
  </TD>
 </TR>
 <TR>
  <TD>
  <div Id="comune2" onmouseover="evidenzia(200,200)"
onmouseout="nascondi()">
    <A HREF="">Comune2</A>
  </div>
  </TD>
 </TR>
</TABLE>
</HTML>