Ciao a tutti, sono nuovo e non molto esperto di javascript.
Prima di postare ho cercato, invano, di vedere se altri post mi aiutavano a risovere il problema (ma se, nella mia inesperienza, non posso escludere che ve ne siano).
Ciò detto, espongo il mio problema:
Premessa:
La pagina che sto scrivendo (in php) è destinata a ospitare un indice analitico composto di voci (che, sempre visibili, sono precedute da una immagine che mostra il segno + ["plus1.png"]) e di sottovoci (che divengono visibili solo se viene selezionata la relativa voce; infatti a ogni voce corrispondono una o più sottovoci).
Accanto ad ogni singola voce ho posto un anchor tag (apri/chiudi) cliccando sul quale: (a) si dovrebbe rendere visibile il DIV contenente le relative sottovoci; (b) l'immagine che precede la voce [plus1.png] dovrebbe cambiare in un segno meno [minus1.png].
Naturalmente ricliccando sull'anchor tag (apri/chiudi) il DIV contenente le relative sottovoci dovrebbe tornare invisibile e l'immagine dovrebbe tornare ad essere il segno più [plus.png].
Problema:
Lo script funziona bene per quanto riguarda l'apertura e chiusura del DIV contenente le sottovoci dell'indice, ma non funziona per quanto riguarda le immagini, nel senso che l'immagine rimane sempre quella del segno più.
Il codice:
Trattandosi di un codice che viene scritto in php con un ciclo while, mi limito a scrivere, semplificandolo al massimo, solo il codice html che interessa.
FILE "PROVA.HTML"
<head>
<script language="javascript">
function togglebis(what){
if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
} else {
document.getElementById(what).style.display = "none";
}
}
function showhide(imid) {
if (document.getElementById(imid).src == "plus1.png") {
document.getElementById(imid).src = "minus1.png";
} else {
document.getElementById(imid).src = "plus1.png";
}
}
</script>
</head>
<body>
<div style="border: 1px solid black;">
<table>
<tr>
<td width="85%">[img]plus1.png[/img] Voce 1</td>
<td width="15%">apri/chiudi</td>
</tr>
</table>
</div>
<div style="display:none;" id="sub1">
- Sottovoce uno
- Sottovoce due
- Sottovoce tre
</div>
<div style="border: 1px solid black;">
<table>
<tr>
<td width="85%">[img]plus1.png[/img] Voce 2</td>
<td width="15%">apri/chiudi</td>
</tr>
</table>
</div>
<div style="display:none;" id="sub2">
- Sottovoce uno
- Sottovoce due
</div>
</body>
</html>
POSSIBILE SOLUZIONE:
In seguito ad alcune prove che ho fatto (invertendo l'ordine dei files minus1.png e plus1.png) credo che il problema risieda nella funzione JS showhide(imid), ed in particolare nella sua condizione IF, che viene sempre riconosciuta come FALSA (anche quando dovrebbe essere VERA).
Naturalmente, nell'esempio fatto, i due files "minus1.png" e "plus1.png" si trovano nella medesima directory del file "prova.html".
Un grandissimo grazie in anticipo ad ognuno che vorrà provare ad aiutarmi.
Saluti
Rispondi quotando
