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