Ragazzi,
ho un menu...con circa 5 link.
Adesso, siccome ogni link ha solo poche righe....vorrei fare in modo di creare un box al centro pagina...e che il contenuto testuale cambi in base al link in cui clicco.
Come potrei fare qualcosa di simile?
Penso con i div...c'è qualke esempio in rete?
Grazie
--Morpheux
Intendi forse dire che non vuoi linkare realmente a pagine diverse ma caricare tutto in una sola pagina e utilizzare gli hyperlink solo per visualizzare un solo div e nascondere gli altri?
Le persone si dividono in due categorie: quelli che dividono le persone in due categorie e quelli che non lo fanno.
PERFETTO!!!
Scusate se mi sono espresso malissimo...ma il concetto era proprio questo
Grazie
--Morpheux
Poi ti inventi una funzione che chiami ogni volta che clicchi su un link e che non fa altro che fare:codice:function $id(id) { return (document.getElementById)? document.getElementById(id) : document.all[id]; } function toggleBox(id, iState) { $id(id).style.display = iState? "block":"none"; }
codice:toggle (questoid, 1); toggle (tuttiglialtriid, 0);
Le persone si dividono in due categorie: quelli che dividono le persone in due categorie e quelli che non lo fanno.
Sinceramente non ho capito bene il tuo codice...
Perchè considerando che io ho 4 link...in cui in ogni "box" c'è del testo...anche in grassetto e di dimensione diversa....
--Morpheux
In pagina tu metterai tutti i div, contenenti le rispettive sezioni, e li vedrai tutti.
La funzione toggle non fa altro che cambiare la visibilità dei singoli div.
Allora, supponiamo che i tuoi 5 div abbiano questi id : div_1, div_2, div_3, div_4 e div_5
Con un css puoi tranquillamente impostarli tutti con display:none; in modo che di default siano invisibili.
ti fai una funzione più o meno così:
function vai(idLayer)
{
for(i=1;i<6;i++)
{
if(idLayer==i)
toggle('div_'+i,1)
else
toggle('div_'+i,0)
}
}
}
Poi, all'onclick del link 1 ci metti javascript:vai(1) ecc...
prova perchè non l'ho testato
Le persone si dividono in due categorie: quelli che dividono le persone in due categorie e quelli che non lo fanno.
Incollo il codice...cosi se magari potete mi dite dove sto sbagliando...xke nn capisco cosa manca...
Grazie ankora!
Codice PHP:<html>
<head>
<script>
function vai(idLayer)
{
for(i=1;i<6;i++)
{
if(idLayer==i)
toggle('div_'+i,1)
else
toggle('div_'+i,0)
}
}
}
</script>
</head>
[url="#"]div 1[/url]
[url="#"]div 2[/url]
[url="#"]div 3[/url]
[url="#"]div 4[/url]
[url="#"]div 5[/url]
[url="#"]div 6[/url]
<div id="div_1" align="center" style="position:absolute; display:none">
<h2>[b]PRIMO DIV[/b]</h2></div>
<div id="div_2" align="center" style="position:absolute; display:none">
<h2>[b]SECONDO DIV[/b]</h2></div>
<div id="div_3" align="center" style="position:absolute; display:none">
<h2>[b]TERZO DIV[/b]</h2></div>
<div id="div_4" align="center" style="position:absolute; display:none">
<h2>[b]QUARTO DIV[/b]</h2></div>
<div id="div_5" align="center" style="position:absolute; display:none">
<h2>[b]QUINTO DIV[/b]</h2></div>
<div id="div_6" align="center" style="position:absolute; display:none">
<h2>[b]SESTO DIV[/b]</h2></div>
</html>
--Morpheux
Ok...senti...
non dovevi fare "proprio" copia+incolla... ho scritto il codice in 2 minuti senza nemmeno mettere i punti e virgola...
Cmq....questo funziona....riadattalo ai tuoi bisogni
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Titolo</title> <script type="text/javascript"> function $id(id) { return (document.getElementById)? document.getElementById(id) : document.all[id]; } function toggleBox(id, iState) { $id(id).style.display = iState? "block":"none"; } function vai(idLayer) { for(i=1;i<6;i++) { if(idLayer==i) toggleBox('div_'+i,1); else toggleBox('div_'+i,0); } } </script> </head> <body> div 1 div 2 div 3 div 4 div 5 div 6 <div id="div_1" align="center" style="position:absolute; display:none"> <h2>PRIMO DIV</h2></div> <div id="div_2" align="center" style="position:absolute; display:none"> <h2>SECONDO DIV</h2></div> <div id="div_3" align="center" style="position:absolute; display:none"> <h2>TERZO DIV</h2></div> <div id="div_4" align="center" style="position:absolute; display:none"> <h2>QUARTO DIV</h2></div> <div id="div_5" align="center" style="position:absolute; display:none"> <h2>QUINTO DIV</h2></div> <div id="div_6" align="center" style="position:absolute; display:none"> <h2>SESTO DIV</h2></div> </body> </html>
Le persone si dividono in due categorie: quelli che dividono le persone in due categorie e quelli che non lo fanno.
GRAZIEEEEEEEEEEEEEEEEEEEEEEEEE MILLEEEEEEEEEEEEEEEE!!!
Grandiosooo funziona alla grande!
Ma posso stressarti x l'ultima cosa?!?...quando apro la pagina di default posso fare in modo che mi appaia un div?!?...ovvimente cliccando su uno dei link poi scompare...
--Morpheux
Un ultimissima cosa...se sto in una pagina diversa da questa sotto...e clicco sula voce "div 2"...kome href avevo provato a mettere: div 2...
ma purtroppo mi porta alla pagina index solo....senzafarmi apparire il div ke mi interessa!
Cosa posso fare?
--Morpheux
Permessi di invio
Rispondi quotando