Variare contenuto di un div al click del mouse

**spiderman23** · 24-10-2008, 10:45

Ciao a tutti,
il mio problema è questo...dovrei creare una sorta di guida/manuale in una pagina web e per fare questo avevo pensato al javascript facendo in modo che gran parte del contenuto della pagina rimanga fisso(header, indice e footer) e a cambiare fosse esclusivamente il "div" testo al click del mouse su un capitolo dell'indice...
ora...non sono praticissimo di javascript e sinceramente adesso come adesso non so come impostare lo script....qualche "dritta"?...se c'è qualche esempio online per favore linkate xke non riesco a trovare nulla...

Grazie

**cavicchiandrea** · 24-10-2008, 12:11

A grandi linee una cosa del genere dovrebbe andar bene:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/ajax.js"></script>
<title>Documento senza titolo</title>
<script type="text/javascript">
function desc(T){
var Testo = new Array()
//lista array qui puoi modificare i contenuti e lunghezza della lista.
Testo[1] = "Qui scrivo il primo testo descrittivo";
Testo[2] = "Qui scrivo il secondo testo descrittivo";
Testo[3] = "Qui scrivo il terzo testo descrittivo";
//stampo a video il relitivo link.
document.getElementById("descrizione").innerHTML=Testo[T];
}
</script>
<style type="text/css" media="all">
#menu{
	padding: 0;
	float: left;
	width: 210px;
	overflow: hidden;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	height: 400px;
}
.menu li{
	display: block;
	list-style-type: none;
	float: left;
	width: 200px;
}
.menu li a{
	float: left;
	color: #000000;
	text-decoration: none;
	padding-top: 7px;
	padding-right: 7px;
	padding-bottom: 11px;
	padding-left: 7px;
}

.menu li a:hover{
	color: #466AB4;
}
#descrizione{
	float: left;
	width: 650px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	height: 400px;
}
#top{
	height: 120px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#centrale{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#sotto{
	height: 50px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
</style>
</head>

<body>
<div id="top">Pagina di prova</div>
<div id="centrale">
  <div id="menu"><ul class="menu">[*]Prima voce del menu[*]Seconda voce del menu[*]Terza voce del menu[/list]
  </div><div id="descrizione"></div>
</div>
<div id="sotto"></div>
</body>
</html>

**spiderman23** · 24-10-2008, 15:36

si...piu o meno è quello che stavo cercando...xò si potrebbe invece al posto di impostarlo già nello script il testo includerlo da un file esterno?...la mia idea sarebbe quella di inserire i vari capitoli in file .html contenenti ad esempio:
<div id=testo>
Testo del capitolo
</div>

e poi a seconda del link cliccato mi visualizza nel div il file relativo....

scusami per la mia ulteriore "richiesta"

**cavicchiandrea** · 24-10-2008, 15:53

Potresti utilizzare ajax, ma l'operazione è molto + complicata e senza le basi di javascript la vedo dura, ma se hai tenacia è voglia di leggere qui trovi tutto. http://javascript.html.it

Discussione: Variare contenuto di un div al click del mouse

Strumenti discussione

Ricerca discussione

Visualizza

Variare contenuto di un div al click del mouse

Permessi di invio