Usare script per menù Mac [era: Creazione...]

[tryhere]

Vorrei creare un menù come questo utilizzando JavaScript...
Non cerco librerie già fatte...vorrei che sviluppassimo un apposito script da zero.
Per chi fosse interessato nella mia home page c'è il forum dedicato al progetto.

[Saturnix]

Ma nel link che hai postato è già scritto come fare. Che senso ha rifare da zero qualcosa che hai già?

[tryhere]

Ho trovato il file js che viene usato ma non c'è il codice di un file html di esempio.

[Saturnix]

<script type="text/javascript" >
var dock = new MacStyleDock(
document.getElementById('dock'),
[
{
name : 'mac-icon-0-',
extension : '.jpg',
sizes : [32, 64],
onclick : function(){
window.location = 'http://www.safalra.com/';
}
}
],
32,
64,
2);
</script>

Questo script però lo inserisci nell'HTML. Ovviamente aggiungi un riferimento al file js di cui parli tu.

[tryhere]

Ho fatto come mi hai detto ma la pagina è completamente bianca...non devo ad esempio inserire le immagini?

[Saturnix]

Infatti. Nella pagina che hai linkato ci sono anche le istruzioni per inserire correttamente il riferimento al file *js (che fra l'altro deve anche essere inserito nel tuo spazio). Se ancora non funziona, lascio la questione a qualcuno di più esperto di me.

Ciao!

[tryhere]

Certo che ho linkato il file.js ma non si vede niente...ho caricato nella mia home page quello che ho fatto...

[webpaul]

Qualche tempo fa per provare avevo fatto quel menu stile Mac prendendo tutto il materiale proprio da quel sito e funzionava alla grande. Quindi ti basta seguire le "istruzioni". Ovvio che se mancano le immagini le devi inserire tu

[tryhere]

Le ho inserite ma non vengono visualizzate...qui la mia versione
qui la versione ufficiale.
Non so più cosa fare...

[Saturnix]

Le ho inserite ma non vengono visualizzate...qui la mia versione
qui la versione ufficiale.
Non so più cosa fare...

Mancano le immagini per quando passi sopra con il mouse. Posta il tuo codice.

EDIT: come volevasi dimostrare, mancano 2 delle 3 immagini necessarie:
http://www.tryhere.altervista.org/mac-icon-80.png
http://www.tryhere.altervista.org/mac-icon-160-full.png

Questa è l'unica presente
http://www.tryhere.altervista.org/mac-icon-160.png

Ciao!

[tryhere]

Grazie! Ora le ho inserite! Un'ultima cosa...quando passo il mouse su un'immagine compaiono i simboli di immagine mancante sotto ad alcune delle altre...

[dreadnaut]

spero che tu abbia intenzione di mettere un link all'articolo originale almeno; non è mai bello spacciare per proprio lavoro altrui.

[tryhere]

ovviamente è solo per capire come funziona, poi lo tolgo. non mi interessa avere un menù di schermate mac

[Saturnix]

spero che tu abbia intenzione di mettere un link all'articolo originale almeno; non è mai bello spacciare per proprio lavoro altrui.

Vorrei creare un menù come questo (http://safalra.com/web-design/javasc...ac-style-dock/) utilizzando JavaScript...

Grazie! Ora le ho inserite! Un'ultima cosa...quando passo il mouse su un'immagine compaiono i simboli di immagine mancante sotto ad alcune delle altre...

Strano, perchè le immagini sono tutte inserite. Inoltre io lo vedo correttamente non capisco dove sia il problema.
Ciao!

[tryhere]

Ho riportato in qualche post precedente la schermata di quando visualizzo quell'errore...

[Saturnix]

Davvero, io lo visualizzo correttamente.



La domanda sorge spontanea, hai provato con altri browser? Prova anche a fare un reload della pagina.

[tryhere]

Con IE6 non visualizza nessuna immagine finchè non ci passo sopra con il mouse, con FF funziona bene a parte quello che ho segnalato prima (hai notato l'errore nell'immagine che ho postato?)

[Saturnix]

(hai notato l'errore nell'immagine che ho postato?)

Si, vedo. A questo punto la questione passa a qualcuno di più esperto di me.

[dreadnaut]

ti sei dimenticato l'immagine riflessa?
http://safalra.com/web-design/javasc...reflection.png

[Saturnix]

ti sei dimenticato l'immagine riflessa?
http://safalra.com/web-design/javasc...reflection.png

bravo, hai preso il quarto link mancante!

Ciao!

[tryhere]

Grazie a tutti!
Rimane ancora un piccolo problemino riguardante la riflessione...
quando passo il mouse sopra ad un'immagine alcune riflessioni scompaiono...nell'originale non è così.

EDIT:
Può essere che mi manchi qualche altra immagine della riflessione?

[tryhere]

Ho modificato il codice js nella pagina html:
CODICE ORIGINALE:

<script type="text/javascript">

    function createDockParameters(name){
      return [
          {
            name:      name,
            extension: '.png',
            sizes:     [80, 160],
            onclick:   function(){
                         alert('You clicked on the first icon. You can configure arbitrary JavaScript to be executed when an icon is clicked. In this example an alert box is displayed.');
                       }
          },
          {
            name:      name,
            extension: '.png',
            sizes:     [80, 160],
            onclick:   function(){
                         alert('You clicked on the first icon. You can configure arbitrary JavaScript to be executed when an icon is clicked. In this example an alert box is displayed.');
                       }
          }
        ];
    }

    var dock = new MacStyleDock(
        document.getElementById('dock'),
        (window.XMLHttpRequest
            ? createDockParameters('mac-icon-')
            : createDockParameters('mac-icon-solid-')),
        80,
        160,
        2);

  </script>

CODICE MODIFICATO:

<script type="text/javascript">
	//<![CDATA[
	var dock=new Dock(
		document.getElementById('bar'),
		[
			{name:'mac-icon-',extension:'.png',sizes:[80,160],onclick:alert('ciao')},
			{name:'mac-icon-',extension:'.png',sizes:[80,160],onclick:alert('ciao')}
		],
		80,
		160,
		2
	);
	//]]>
</script>

Ora però non visualizzo più niente...dove ho sbagliato?
PS: ho fatto un perchè ho aggiunto tutta la parte di codice.