Problemi con un JavaScript

31-08-2010, 17.18.30

Ragazzi, è da tempo che cerco un bel JavaScript che funga come menù di navigazione per il mio sito.
Finalmente ho trovato quello che voglio: http://phatfusion.net/imagemenu/

Premettendo che sto sviluppando la mia pagina principale in HTML nel programma Adobe Dreamweaver, ci ho provato per... due giorni e mezzo

ma non riesco a capire come inserire questo JavaScript nel mio sito! Vi prego di aiutarmi...

Vi chiedo, per favore, di indicarmi il procedimento passo-passo, su come inserire questo script nel mio documento HTML.
Se non lo conoscete magari lo scaricate e vedete come è combinato

GRAZIE A TUTTI!

**slavettosoft** · 04-09-2010, 00.00.24

Ciao!

Questa è la pagina dello script ridotta al minimo, ti potrà essere utile:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<link href="imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>
</head>
<body>
	<div id="imageMenu">
		<ul>
			<li style="background: url(images/landscapes.jpg) repeat scroll 0%;"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
			<li style="background: url(images/people.jpg) repeat scroll 0%;"><a href="http://www.aaronbirchphotography.com">People</a></li>
			<li style="background: url(images/nature.jpg) repeat scroll 0%;"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
			<li style="background: url(images/urban.jpg) repeat scroll 0%;"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
			<li style="background: url(images/abstract.jpg) repeat scroll 0%;"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
		</ul>
	</div>
		
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
		});
	</script>
</body>
</html>

Inserirlo ed utilizzarlo non è molto difficile:

Prima di tutto, scarica lo script da qui: http://phatfusion.net/imagemenu/imagemenu.zip ;

poi copia il file js e il css nella stessa cartella in cui vi è il file html nel quale vuoi far apparire il menu (si chiamano imageMenu.js e imageMenu.css e si trovano nella cartella imagemenu).

oltre a questo, ti verve anche il file mootools.js (lo trovi nella cartella filezip/_common/js) copia anche questo file nella stessa cartella

A questo punto importali nella pagina:

Codice HTML:

<html>
<head>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>
<link href="imageMenu.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

ora, ti devi costruire la struttura del vero script:
prima di tutto ti serve un div che conterrà tutto il menu e un unordered list (ul)

Codice HTML:

<div id="imageMenu">
    <ul>
    </ul>
</div>

ora, gli devi aggiungere tanti li quante sono le immagini:

Codice HTML:

<div id="imageMenu">
    <ul>
       <li><a href="www.unsitoacaso.it">Un sito a caso</a></li>
       <li><a href="www.secondositoacaso.it">Un sito a caso 2</a></li>
       <li><a href="www.terzositoacaso.it">Un sito a caso 3</a></li>
    </ul>
</div>

ora devi soltanto aggiungere le immagini:
per ogni li, devi specificare l'attributo style e indicargli la posizione dell'immagine (che verrà usata come una specie di sfondo).

Codice HTML:

<li style="background: url('POSIZIONE_IMMAGINE') repeat scroll 0%;"><a href="www.unsitoacaso.it">Un sito a caso</a></li>

sostituisci a posizione immagine la posizione assoluta o relativa dell'immagine da utilizzare

una volta finito, ricordati di incollare questo, esattamente dopo il div

Codice HTML:

<script type="text/javascript">
		window.addEvent('domready', function(){
			var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
		});
	</script>

Lo script dovrebbe ora funzionare ;)

Provalo e dimmi se funziona

04-09-2010, 13.52.42

Grazie della completissima risposta. Adesso provo e con un EDIT ti faccio sapere.

EDIT:

Ecco come si presenta il mio codice:

Codice HTML:

 <div id="imageMenu">
    <ul>
       <li style="background: url(images/abstract.jpg) repeat scroll 0%;"><a href="http://www.techland.altervista.org/index.html">HOME</a></li>
       <li style="background: url(images/landscapes.jpg) repeat scroll 0%;"><a href="http://www.techland.altervista.org/chisono.html">CHI SONO</a></li>
       <li style="background: url(images/mask.jpg) repeat scroll 0%;"><a href="http://www.techlandforum.altervista.org">FORUM</a></li>
       <li style="background: url(images/nature.jpg) repeat scroll 0%;"><a href="http://www.techland.altervista.org/gallery.html">GALLERY</a></li>
       <li style="background: url(images/people.jpg) repeat scroll 0%;"><a href="http://www.techland.altervista.org/news.html">NEWS</a></li>
    </ul>
</div>
  <p>
      <script type="text/javascript">
		window.addEvent('domready', function(){
			var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
		});
	</script>

Naturalmente la prima parte del codice, è rimasta invariata ed è sull'header, questa postata sopra è la parte messa nel body.

I problemi sono che nonostante abbia messo nella mia cartella di lavoro la cartella images (con dentro le immagini prestabilite della script tanto per provare) vedo solo il bianco. Non vedo le immagini.

Ho provato inoltre ad aprire con Dreamweaver il codice HTML completo che hai postato per primo, (sempre mettendolo nella stessa cartella della cartella images) ma niente. BIANCO....

Quindi forse c'è un errore... anche nel codice principale... non so...

aiutami please...

**slavettosoft** · 06-09-2010, 00.28.47

Se qualcosa non funziona ci dev'essere un motivo...
La cosa strana è che non ti visualizza il menu nemmeno nel codice completo, ma la cosa ancora più strana è che vedi tutto bianco (anche a javascript spento dovresti comunque riuscire a vedere il menu (anche se fisso).

Prova ad aggiornare la pagina tenendo premuto shift sulla tastiera (clicca sul pulsante aggiorna tenedo premuto shift sulla tastiera), anche se teoricamente non dovrebbe essere la cache il problema.

Se non ti funzionerà, crea una pagina sul tuo sito con lo script e tutte le immagini, script e css referenziati da esso. A quel punto dovrei riuscire a dirti esattamente cos'è che non funziona.

06-09-2010, 13.04.48

Non ci capisco più niente mi dispiace...

Non ho la minima idea di quello che mi hai detto di fare...
Mi devo arrendere forse.

**slavettosoft** · 06-09-2010, 16.01.18

semplicemente, metti la tua pagina con il codice del menu sul tuo sito, insieme agli script che questo usa (intendo mootools.js, mageMenu.js e imageMenu.css) e le immagini che lo script utilizza.

A proposito, sai che probabilmente si tratta di un problema delle immagini ?

Ho visto che nel tuo codice hai utilizzate le immagini predefinite (come "images/abstract.jpg") ma hai provato controllare se queste immagini si trovano nella cartella images ?

06-09-2010, 22.02.41

Certo tutta la cartella images e il relativo contenuto sono la dentro.
E' stranissimo...

**slavettosoft** · 06-09-2010, 22.24.14

semplicemente, metti la tua pagina con il codice del menu sul tuo sito, insieme agli script che questo usa (intendo mootools.js, mageMenu.js e imageMenu.css) e le immagini che lo script utilizza.

appena hai fatto, passami l'url; apena controllerò saprò dirti esattamente cosa c'è che non va.

08-09-2010, 23.37.52

Basta ho abbandonato questo javascript...
Grazie lo stesso dell'aiuto slavetto, ma non mi vanno tutti i javascript.... boh.

Potete chiudere.

Discussione: Problemi con un JavaScript

LinkBack

Strumenti discussione

Display

Problemi con un JavaScript

Tags for this Thread

Regole di scrittura