Script per menu...

Ciao a tutti...
sto creando delle immagini per il mio menu, una normale e una con l'effetto per il passaggio del mouse... come posso gestire le immagini, facendo si che al passaggio del mouse il bottone cambi immagine con quell'altra ke ho preparato?

Grazie in anticipo :grin:

nel css

Codice:

---

ul li:link, li:visited {
list-style-image: url(metti l'url qui);
}
ul li:hover, li:active {
list-style-image: url(metti l'url qui);
}

---

Scusa ma se io inserisco l'url di un bottone, come faccio? Per la sezione documenti, chat forum etc mi viene sempre scritto home page ? :P

Io ho il vecchio script in javascript del menu generato con xara menu maker, ma non so modificarlo...

Citazione:

---

var clicked=""

var gtype=".png"

var selstate="_over"

if (typeof(loc)=="undefined" || loc==""){

var loc=""

if (document.body&&document.body.innerHTML){

var tt = document.body.innerHTML.toLowerCase();

var last = tt.indexOf("_off.js\"");

if (last>0){

var first = tt.lastIndexOf("\"", last);

if (first>0 && first<last) loc = document.body.innerHTML.substr(first+1,last-first-1);

}

}

}



document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>");

tr(false);

writeButton("","http://mksoftware.altervista.org/lang_ita/index_ita.php","_off_b1",116,23,"Home","",0);

writeButton("","http://mksoftware.altervista.org/lang_ita/documenti/documenti.php","_off_b2",116,23,"Documenti","",0);

writeButton("","http://mksoftware.altervista.org/gallery/index.php","_off_b3",116,23,"Immagini","",0);

writeButton("","http://mksoftware.altervista.org/lang_ita/download/download.php","_off_b4",116,23,"Download","",0);

writeButton("","http://mksoftware.altervista.org/lang_ita/chat.php","_off_b5",116,23,"Chat","",0);

writeButton("","http://mksoftware.altervista.org/forum/index.php","_off_b6",116,23,"Forum","",0);

writeButton("","http://mksoftware.altervista.org/lang_ita/awards.php","_off_b7",116,23,"Awards","",0);

writeButton("","http://mksoftware.altervista.org/lang_ita/links.php","_off_b8",116,23,"Links","",0);

tr(true);

document.write("</tr></table>")

loc="";



function tr(b){if (b) document.write("<tr>");else document.write("</tr>");}



function turn_over(name) {

if (document.images != null && clicked != name) {

document[name].src = document[name+"_over"].src;

}

}



function turn_off(name) {

if (document.images != null && clicked != name) {

document[name].src = document[name+"_off"].src;

}

}



function reg(gname,name)

{

if (document.images)

{

document[name+"_off"] = new Image();

document[name+"_off"].src = loc+gname+gtype;

document[name+"_over"] = new Image();

document[name+"_over"].src = loc+gname+"_over"+gtype;

}

}



function evs(name){ return " onmouseover=\"turn_over('"+ name + "')\" onmouseout=\"turn_off('"+ name + "')\""}



function writeButton(urld, url, name, w, h, alt, target, hsp)

{

gname = name;

while(typeof(document[name])!="undefined") name += "x";

reg(gname, name);

tr(true);

document.write("<td>");

if (alt != "") alt = " alt=\"" + alt + "\"";

if (target != "") target = " target=\"" + target + "\"";

if (w > 0) w = " width=\""+w+"\""; else w = "";

if (h > 0) h = " height=\""+h+"\""; else h = "";

if (url != "") url = " href=\"" + urld + url + "\"";



document.write("<a " + url + evs(name) + target + ">");



if (hsp == -1) hsp =" align=\"right\"";

else if (hsp > 0) hsp = " hspace=\""+hsp+"\"";

else hsp = "";



document.write("<img src=\""+loc+gname+gtype+"\" name=\"" + name + "\"" + w + h + alt + hsp + " border=\"0\" /></a></td>");

tr(false);

}

---

So soltanto modificare il formato delle immagini da usare....

spiegati meglio, magari facendomi vedere un esempio pratico.
in ogni modo di possono risparmiare decine di righe di codice con i css

Allora, se vai a vedere il mio sito, c'è un menu.... guardalo e prova a passarci sopra con il mouse: vedrai che cambia colore (per cambiare colore, fa riferimento ad un'altra immagine che viene sostituita alla precedente al passaggio del mouse) ed il giochetto si ripete al contrario quando tu levi il puntatore dal bottone. E' questo ke devo fare io, con la sola differenza che devo usare immagini differenti. Purtroppo, non so come coordinare l'effetto roll-over...

Codice:

---

ul li:link, li:visited {
background: url(immagine_default.png);
}
ul li:hover, li:active {
background: url(immagine_rollover.png);
}

---

vai su www.asbafo.net nella sezione Applet e Javascript/Menu di navigazione
lì trovi menù di tutti i gusti e facili da modificare come codice

ciaoooooo!