rollover

**centro** · 29-01-2007, 23:34

ciao a tutti,
avrei la necessità come da immagine sotto,
al rollover sulla pallina del grafico di far comparire
un triangolo rispettivamente sotto l'anno.
avete un tutorial o qualcosa da consigliarmi.
magari se il triangolino seguisse sempre la posizione del mouse ancora meglio....

l'immagine è tipo questa:

grazie mille..
buona serata
giuseppe

**br1** · 30-01-2007, 00:32

Esempio:

codice:

<HTML>
<HEAD>
<script type="text/javascript"> 
function triangolo(e){ 
  e = (e) ? e : event; 
  //if(!e) e = window.event 
  oggsrc = (e.target) ? e.target : e.srcElement; 
  ox = (e.offsetX) ? e.offsetX : e.layerX 
  oy = (e.offsetY) ? e.offsetY : e.layerY 
  ox = (ox>=15) ? ox-15 : 0;
  ox = (ox>=370) ? 370 : ox;
  document.getElementById("tri").style.left=""+(ox)+"px";
} 
</script> 
</HEAD>
<BODY>
<div style="position:relative;">
[img]immagine.gif[/img]
[img]triangolo.gif[/img]
</div>
</BODY>
</HTML>

Occhio alle dimensioni delle immagini e ai vari valori da sommare/sottrarre/confrontare nello script... ovviamente sono legati fra loro

ciao

**centro** · 30-01-2007, 01:11

br1 dire che è fantastico quello che mi hai postato è poco...
grazie mille...
sei grande,.,...

ma come mai non funziona su firefox...
di solito ho problemi al contrario .. magari su firefox funge e su ie no...

vabbe... faccio qualche prova.. o ci devo proprio rinunciare..?

ahh ma scusa...

in questo modo posso controllare anche dove sono con il mouse= cioè i i pixel?
se oltre a questo giochetto, voglio far apparire anche delle immagini diverse su un div che ho al lato del grafico a seconda del punto dove mi trovo in questo modo posso farlo.. vero...?ù
cioè da dentro questa funzione posso chiamare una'ltra che mi faccia semplicemente a seconda di dove mi trovo visualizzare immagini diverse...?

sto provando tipo così.. ma no và...

if(ox==250 && oy==40){

fammi vedere il div img 1

}elseif(ox==280 && oy==20){

fammi vedere il div img 2

}elseif...

sempre che se possa fare...
ma ormai... ho capito che non si deve rinuanciare,,, a nulla... e tutto è possibile....

solo... comè???

**centro** · 30-01-2007, 12:28

up

qualcuno mi dice perchè no è supportato da firefox?
cosè che non gle và...?

ho provato a mettere un alert(e) ma in entrambi i casi anche quando funzione con ie mi da sempre "undefined" che cosa dovrei passare...?

grazie

**centro** · 30-01-2007, 15:52

ciao a tutti, posto la modifica effettuata....

in questo modo se il grafico e fatto da linee per esempio quando sono su un certo punto posso far comparire anche un'immagine al lato.

e questo è molto buono... almeno per quello che volevo.

Codice PHP:


<HTML>

<HEAD>

<script type="text/javascript"> 

function triangolo(e){ 

   e = (e) ? e : event; 

  //if(!e) e = window.event 



  oggsrc = (e.target) ? e.target : e.srcElement; 

  ox = (e.offsetX) ? e.offsetX : e.layerX 

  oy = (e.offsetY) ? e.offsetY : e.layerY 

if((ox>185 && ox<200) &&  (oy>155 && oy<170)){

      document.getElementById('img1').style.display ='block';

}else{

    document.getElementById('img1').style.display ='none';

}



  ox = (ox>=15) ? ox-15 : 0;

  ox = (ox>=450) ? 450 : ox;

  document.getElementById("tri").style.left=""+(ox)+"px";

} 

</script> 

</HEAD>

<BODY>

<div style="position:relative;">

[img]grafico.jpg[/img]

[img]triangolo.jpg[/img]

</div>



























<div id="img1" style="display: none;">

[img]img1.jpg[/img]

</div>

</BODY>

</HTML>

Poi ho visto che offsetX in firefox no è supportato.
e fin quì non c'è nulla da fare.... se non piangere

ma quello che chiedevo a chi è più esperto di me..(ci vuole poco..)
se devo proprio rinunciare a questo effetto.. (del triangolino che mi segue in orizzontale per tutto il grafico) e farlo in un'altro modo o posso ottenere la stessa cosa con altri metodi anche in firefox.
solo questa... la mia domanda... perchè ci sto a sbattere la testa da stamattina...

grazie...

**homezappa** · 30-01-2007, 16:21

Codice PHP:


  ox = (e.offsetX) ? e.offsetX : (e.offsetLeft) ? e.offsetLeft : e.layerX

  oy = (e.offsetY) ? e.offsetY : (e.offsetTop) ? e.offsetTop : e.layerY

Prova, e, come consiglio, installati in FireFox l'estensione FireBug!
EDIT:
Come non detto! .. chissà cosa pensavo!

Correggi solo qui:

codice:

[img]grafico.jpg[/img]

provato sia su firefox che si IE
da me va!!
HTH
Zappa

**centro** · 31-01-2007, 09:45

grazie mille... homezappa
eh io che mi stao ad impazzi.... e bastava solo quel'event

una buona giornata
e ancora grazie

Discussione: rollover

Strumenti discussione

Ricerca discussione

Visualizza

rollover

Permessi di invio