showDiv / hideDiv con link-immagine

mile · 26 Lug 2007

Ciao a tutti!

Sono nuova di questo forum. Premetto che ne so poco di javascript.

Devo creare una pagina con div sovrapposti che appaiano e scompaiano cliccando sui relativi link-immagine. Ovviamente il tutto funziona con Firefox ma non con IE ed Opera.

Se utilizzo link di testo il tutto funziona perfettamente. Ma a me servono i link immagine!

E' un po' che ci sto sopra ma non trovo la soluzione!

Qualcuno mi può aiutare per favore??!

Di seguito vi scrivo il 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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function showDiv(divid){
document.getElementById(divid).style.display = 'block';
}
function hideDiv(divid){
document.getElementById(divid).style.display = 'none';
}
</script>

</head>
<body>
<table title="Menu di navigazione progetti">
<tr>
<td>
<a href="javascript:;" onclick="showDiv('andromeda');hideDiv('auditoriumPD');hideDiv('gambato');hideDiv('gwangiu');" >andromeda</a>
</td>
<td>
<a href="javascript:;" onclick="hideDiv('andromeda');showDiv('auditoriumPD');hideDiv('gambato');hideDiv('gwangiu');" >padova</a>
</td>
<tr />
<tr>
<td>
<a href="javascript:;" onclick="hideDiv('andromeda');hideDiv('auditoriumPD');showDiv('gambato');hideDiv('gwangiu');" ><img name="gambato" src="../img/photo_gallery/gambato_icoOFF.jpg" border="0" /></a>
</td>
<td>
<a href="javascript:;" onclick="hideDiv('andromeda');hideDiv('auditoriumPD');hideDiv('gambato');showDiv('gwangiu');"><img name="gwangiu" src="../img/photo_gallery/gwangiu_icoOFF.jpg" border="0" /></a>
</td>
<tr />
</table>

<div id="andromeda" style="display: block">
<img src="../img/photo_gallery/andromeda.gif" alt="Immagini progetto Andromeda" />
</div>
<div id="auditoriumPD" style="display: none">
<img src="../img/photo_gallery/auditorium_padova.gif" alt="Immagini Auditorium di Padova" />
</div>
<div id="gambato" style="display: none">
<img src="../img/photo_gallery/gambato.gif" alt="Immagini progetto Gambato" />
</div>
<div id="gwangiu" style="display: none">
<img src="../img/photo_gallery/gwangiu.jpg" alt="Immagini giunto" />
</div>

</body>
</html>

PoLe · 27 Lug 2007

Prova a modicare così

Codice:

function showDiv(divid){
document.getElementById(divid).style.[COLOR="Blue"][B]visibility[/B][/COLOR]='[B][COLOR="blue"]visible[/COLOR][/B]';
}
function hideDiv(divid){
document.getElementById(divid).style.[COLOR="Blue"][B]visibility[/B][/COLOR]='[B][COLOR="blue"]hidden[/COLOR][/B]';
}

:byebye:

mile · 27 Lug 2007

Grazie PoLe per l'aiuto.

Ho provato ad utilizzare il tuo metodo...funziona ma mi posiziona i div uno sotto l'altro, non uno sovrapposto all'altro come riesco a visualizzare in firefox.

Comunque ho trovato il problema: ho chiamato con lo stesso nome gli ID dei div e il NAME dei link immagine

!

Ora però è sorto un altro problema...ovviamente solo in IE!

Le gif animate non partono più! penso sia colpa del
"document.getElementById(divid).style.display = 'block';" che stoppa l'animazione della gif.

Ma se lo sostituisco con
"document.getElementById(divid).style.visibility = 'visible' non ho la sovrapposizione dei div!

:crying::crying:

Mi puoi consigliare qualcosa?

:byebye:

Cerca

Cerca

showDiv / hideDiv con link-immagine

mile

Nuovo Utente

PoLe

MRW Moderator

mile

Nuovo Utente

Discussioni simili