Effetto Rollover su più bottoni

**blumaro** · 02-02-2005, 14:31

Ho un menu di navigazione con 4 bottoni e su ognuno di essi vorrei creare l'effetto roll-over.
Non avendolo mai fatto ho scaricato queso esempio.
Il problema che nell'esempio è indicato soltanto il caso di un bottone.

Come faccio ad inserire l'effetto rollover per gli alti 3 bottoni?

<html>
<head>

<script language="javascript">

</script>

</head>

<body>

[img]bottone-1.gif[/img]

</body>
</html>

Grazie Blum

**franco_da_VC** · 03-02-2005, 02:51

Ciao Blumaro,

non è tanto difficile, io ti consiglierei però alcuni cambiamenti....

1° aggiungi un preload ai bottoni, l'effetto e molto migliore, avrai quindi:

<script language="JavaScript">
<!--

// definizioni immagini su cui si farï¿œil roll-over
//
{
item1on = new Image(); item1on.src="image/puls1b.gif";
item1off = new Image(); item1off.src="image/puls1a.gif";
item2on = new Image(); item2on.src="image/puls2b.gif";
item2off = new Image(); item2off.src="image/puls2a.gif";
}

dove item1on è il tuo imm1 ma precaricato ed item2off è il tuo imm2 ugualmente precaricato; puls1b.gif è il tuo bottone1.gif e puls1a.gif è il tuo bottone2.gif (non vorrei aver invertito le due immagini, verifacalo te), questi due riguardano il primo bottone; item2on ed item2off sono simili ai primi due ma riguardano il secondo botton.

2° Le funzioni di pilotaggio invece diventano:

// funzioni che generano il roll-over
//
function rollOver(imgName){
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn
}

questa è la prima funzione che pilota il rollover e......

function rollOut(imgName){
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff
}

questa è la seconda funzione che pilota il rollout.

3° Per le chiamate usa il seguente metodo:

[img]image/puls1a.gif[/img]
[img]image/puls2a.gif[/img]

naturalmente per il terzo item vi sarà item3on ed item3off e via via così, se le immagini sono diverse avrai puls1a.gif e puls1b.gif, puls2a.gif e puls2b.gif etc. etc. se le immagini sono uguali avrai sempre puls1a.gif e puls1b.gif (ciò ha senso quando ripeti un bottone più volte nella stessa pagina, per esempio sopra e sotto la stessa).

Provalo vedrai che funziona!

**mrcanoa** · 03-02-2005, 10:52

Se questo può piacerti.....
Qui ho tre stati normale;over;pressione.

Cosa importante: ogni immagine deve avere name diverso.

Nel link dell'immagine=

codice:

		
<a href="##" onMouseUp="swapImage('Image1','../img/salva_f2.gif')" onMouseDown="swapImage('Image1','../img/salva_f3.gif')" onMouseOut="swapImage('Image1','../img/salva.gif')" onMouseOver="swapImage('Image1','../img/salva_f2.gif')">

Qesto il codice:

codice:

function swapImage(nome_img,src_url){
	//alert(document.swapImage.arguments)
	appo_src=document.images[nome_img].src
	document.images[nome_img].src=src_url
}

Discussione: Effetto Rollover su più bottoni

Strumenti discussione

Ricerca discussione

Visualizza

Effetto Rollover su più bottoni

Permessi di invio