Newsgroup: it.comp.lang.javascript
Titolo: rollover disgiunto

Sto cercando il codice per creare un rollover disgiunto, in pratica voglio
che passando sopra ad un'immagine se ne visualizzi un'altra in fondo alla
pagina o dove voglio io.
Jsdir.com non funziona, ho cercato su google ma si trovano solo esempi per
modificare la creazione guidata di Fireworks.
Mi piacerebbbe vedere un'pò di codice senza creazione guidata.
Non è che qualcuno ha qualche esempio salvato nel proprio hd? :-)
Cristian aKa Cc

 pagina o dove voglio io.
Scritto on the fly, lo schema "base":
<script type="text/javascript">
	var imgOver=new Image(), imgOut=new Image();
	imgOver.src="mypic_over.gif";
	imgOut.src="mypic.gif";
</script>
<a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver.src"
onmouseout="document.images['mypic'].src=imgOut.src">
	<img src="another_pic.gif" alt="another picture" border="0" width="200"
height="20" />
</a>
<img name="mypic" src="mypic.gif" width="32" height="32" alt="my picture"
border="0" />
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

Grazie mille!
Vorrei chiederti solo una cosa: io vorrei che l'immagine apparisse solo al
passaggio del mouse e nulla quando non vi č sopra.
Come devo fare, metto un'immagine piccola del colore di sfondo oppure č
possibile fare in altro modo?

Non sono molto pratico di javascript..quindi maggari sparo una cazz...
Vorrei anche utilizzare il codice per altre 4 immagini.
Dato che il sito è sviluppato su un'unica pagina e tramite php mi porto
dietro una variabile "$pagina" e possibile ferli interargire?
Praticamente chiamerei l'immagine anzichè mypic.gif in home_mypic.gif e
quindi la potrei richiamare $page_mypic.gif
Spero di non averla detta grossa, altrimenti suggeritemi voi qual'è il
metodo migliore...
Cristian aKa Cc

 possibile fare in altro modo?
O fai una gif totalmente trasparente, ed usi quella come immagine di
default; oppure cambi approccio semplicemente cambiando visibility.. pero'
questo se lo vuoi rendere crossbrowser (quindi anche con Netscape 4.x etc)
devi scrivere un po' di codice in piu'.
Il codice che ti ho postato prima, funziona bene o male su tutti i
browser,anche i piu' vecchi.


 quindi la potrei richiamare $page_mypic.gif
Nessun problema.
var imgOver=new Image();
imgOver.src="<?=$page?>_mypic.gif";
il resto rimane invariato.


Ciao Zero, ancora grazie per le risposte..
Vorrei rendere dinamico al massimo il mio menu.Vorrei che date due immagini
(A-B) comparisse l'immagine, sempre disgiunta RollA e RollB a seconda se
sono passato sopra A o B. E' possibile realizzarlo?
PS: sto guardando qualche tutorial ed ho capito che attraverso l'attributo
NAME dell'immagine A posso passare una variabile (A ="home"). Quindi mi
chiedevo se riuscissi a creare una funzione potrei scrivere meno codice,
solo che non so come..
Cristian aKa Cc

 solo che non so come..
Potrei fartela io, ma preferirei che almeno tu "tentassi" la sua
realizzazione; poi eventualmente aggiustiamo il tiro.
La struttura base te l'ho data, se hai bisogno della reference di JS (dai
un occhio alla 1.3) la trovi qua:
http://devedge.netscape.com/central/javascript/
Se hai domande, spara pure :)


Ho dato tutto...ora sparo una domandina alla quale non arrivo..
Io ho un link, dove il nome dell'immagine č clienti. Se passo sopra a questa
immagine l'immagine di nome "mypic" deve cambiare e caricare clienti_on.gif
.
Come faccio a passargli la variabile name?
<script type="text/javascript">
var imgOver=new Image(), imgOut=new Image();
imgOver.src=eval(name + "_it.gif");
imgOut.src="menu_off.gif";
</script>
-----------------------------------------------
body ----------------------------
<a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver.src"
onmouseout="document.images['mypic'].src=imgOut.src">
<img name="clienti" src="another_pic.gif" alt="another picture" border="0"
/>
</a>
<a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver.src"
onmouseout="document.images['mypic'].src=imgOut.src">
<img name="abbattitori" src="another_pic.gif" alt="another picture"
border="0" />
</a>
<img name="mypic" src="menu_off.gif" alt="my picture"
border="0" />

 Come faccio a passargli la variabile name?
Devi passarglielo esplicitamente.
Perche' stiamo parlando di "preloading", quindi lui dovrebbe caricare le
immagini "prima" di arrivare a fare lo swap (e quindi anche "conoscere"
eventualmente il "name" dell'immagine).
Nel tuo caso, avrai quindi piu' variabili al posto di imgOver:
<script type="text/javascript">
	var img_clienti=new Image(), img_abbattitori=new Image(),
		img_off=new Image();
 
	img_off.src="menu_off.gif";
	img_clienti.src="clienti_on.gif";
	img_abbattitori.src="abbattitori_on.gif";
</script>
 
<a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=img_clienti.src"
onmouseout="document.images['mypic'].src=img_off.src">
<img name="clienti" src="another_pic.gif" alt="another picture" border="0"
/>
</a>
<a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=img_abbattitori.src"
onmouseout="document.images['mypic'].src=img_off.src">
<img name="abbattitori" src="another_pic.gif" alt="another picture"
border="0" />
</a>
<img name="mypic" src="menu_off.gif" alt="my picture" border="0" />
Questo codice potresti incapsularlo cosi':
<script type="text/javascript">
	var imgs=Object();
	imgs.add=function(name,src){
		this[name]=new Image();
		this[name].src=src;
	}
	imgs.set=function(name){
		name=name||"out";
		document.images["mypic"].src=this[name].src;
	}
 
	imgs.add("out","menu_off.gif");
	imgs.add("clienti","clienti_on.gif");
	imgs.add("abbattitori","abbattitori_on.gif");
</script>
 
<a href="javascript:void(0)"
onmouseover="imgs.set('clienti');"
onmouseout="imgs.set();">
<img name="clienti" src="another_pic.gif" alt="another picture" border="0"
/>
</a>
<a href="javascript:void(0)" onmouseover="imgs.set('abbattitori');"
onmouseout=imgs.set()">
<img name="abbattitori" src="another_pic.gif" alt="another picture"
border="0" />
</a>
<img name="mypic" src="menu_off.gif" alt="my picture" border="0" />
-- 


 > Io ho un link, dove il nome dell'immagine è clienti. Se passo sopra a


> var imgs=Object();
var imgs=new Object();
il resto dovrebbe andar bene credo, ma non ci metto piu' la mano sul fuoco,
l'ho scritto on the fly e forse ci potrebbero essere altre distrazioni. :)
