[JS]Mostra/Nascondi testo e img...come si fa?

08-08-2007, 14.12.49

Ciao a tutti, volevo sapere come posso fare a nascondere/mostrare una cosa?
Esempio..
ho una pagina "pippo.html" e dentro la pagina metto un img "andrea.gif" quando una presona ci clikka deve spuntare un testo "collegamento 1 \br\ collegamento 2" e dopo per nasconderlo deve riklikkare su "andrea.gif" come si fa??Tipo netsons...#showpass/#hidepass..è possibile?o.o..grazie..ciao davide ^^

**funcool** · 08-08-2007, 14.17.28

Dovrebbe funzionare:

Codice:

<script type="text/javascript">
var mostra=true;
function NascondiMostra() {
	if (mostra)
		document.getElementById("collegamento").style.display="block";
	else
		document.getElementById("collegamento").style.display="none";
	mostra=!mostra;
}
</script>

Codice HTML:

<img src="andrea.gif" onclick="MostraNascondi();" />
<div id="collegamento" style="display:none;">collegamento 1 \br\ collegamento 2</div>

08-08-2007, 14.25.25

mmm..non so che dirti ma non funziona:

Codice HTML:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>collegamento 1</title>
</head>

<body>
<script type="text/javascript">
var mostra=true;
function NascondiMostra() {
	if (mostra)
		document.getElementById("collegamento").style.display="block";
	else
		document.getElementById("collegamento").style.display="none";
	mostra=!mostra;
}
</script>
<img href="#" src="andrea.gif" onclick="MostraNascondi();">
<div id="collegamento" style="display:none;"><a href="http://sito.it">sito2</a><br><a href="http://sito.it">ciao</a></div>
</body>

</html>

GRazie..ciao davide ^^
Edit:
avevi sbagliato

Codice:

<img href="#" src="andrea.gif" onclick="MostraNascondi();">

in

Codice:

<img href="#" src="andrea.gif" onclick="NascondiMostra();">

;)
ma come faccio a centrarlo?^^

**funcool** · 08-08-2007, 14.30.21

Ho sbagliato a richiamare la funzione.
Modifica questa riga (perché hai aggiunto href="#" ?):

Codice HTML:

<img href="#" src="andrea.gif" onclick="MostraNascondi();">

In questo modo:

Codice HTML:

<img src="andrea.gif" onclick="NascondiMostra();">

08-08-2007, 14.32.20

Funcool:ho aggiunto href="#" perchè senò sembra che sia per figura ;)..dopo guarda come si vede:
http://top100sims.netsons.org/ io vorrei che fosse più grande già prima che si clikkasse..e ri manesse di grandezza stabilita anche dopo aver clikkato ^^..grazie..ciao davide :D

**funcool** · 08-08-2007, 14.34.25

Originalmente inviato da sIM

Funcool:ho aggiunto href="#" perchè senò sembra che sia per figura ;)..dopo guarda come si vede:

Eh?

Originalmente inviato da sIM

io vorrei che fosse più grande già prima che si clikkasse..e ri manesse di grandezza stabilita anche dopo aver clikkato ^^..grazie..ciao davide :D

Aggiungi il parametro width e dagli la larghezza più grande.

08-08-2007, 14.42.04

ok..ho aggiunto questo:

Codice:

<style type="text/css">
div#vis {width: 700px; }
</style>
<script type="text/javascript">
function ShowAndHide(id1,id2){
if(document.getElementById){
    el1=document.getElementById(id1);
    el2=document.getElementById(id2);
    if(el1.style.display=="none"){
        el1.style.display="block";
        el2.style.display="none";
        }
    else{
        el1.style.display="none";
        el2.style.display="block";
        }
    }
}
    </script>
<table align="center"class="darkbg" cellpadding="1" cellspacing="1">
<tr><td align="center" class="mediumbg" colspan="3">
<h3>Miglior Sito</h3>
</td></tr>
<tr><td class="lightbg" align="center">
<script type="text/javascript">
var mostra=true;
function NascondiMostra() {
	if (mostra)
		document.getElementById("collegamento").style.display="block";
	else
		document.getElementById("collegamento").style.display="none";
	mostra=!mostra;
}
</script>
<img href="#" src="{$banner_url}" onclick="NascondiMostra();">
<div id="collegamento" class="vis" style="border-style:solid; display:none">
  <a href="ok/{$list_url}/index.php?a=stats&u={$username}">Statistiche Sito</a><br />
<a href="ok/{$url}">Visualizza Sito</a></div>
</td></tr>
</table>
<br />

ma non è cambiato niente!lo vorrei più gradneO.o...
dopo perchè il bordo è doppio??quando ho detto..mmm..piccolo..come si dice?boh..solido?boh..cmq non doppio :P..grazie..ciao davide..
Ps.ho messo href senò la gente pensa che non funzioni che il collegamento sia errato.. ;)...i miei utenti non conoscono l'html (i visitatori) ;).. grazie..ciao davide :P...

**funcool** · 08-08-2007, 14.49.03

Originalmente inviato da sIM

ma non è cambiato niente!lo vorrei più gradneO.o...

Assegna la larghezza a td come ti ho spiegato prima.

Originalmente inviato da sIM

dopo perchè il bordo è doppio??quando ho detto..mmm..piccolo..come si dice?boh..solido?boh..cmq non doppio :P..grazie..ciao davide..

Metti (al posto di #000000 metti il colore del bordo):

Codice:

border:1px solid #000000;

Originalmente inviato da sIM

Ps.ho messo href senò la gente pensa che non funzioni che il collegamento sia errato.. ;)...i miei utenti non conoscono l'html (i visitatori) ;)..

Se non conoscono l'HTML vanno a controllare se c'è href="#"?
Piuttosto metti:

Codice HTML:

<a href="#" onclick="NascondiMostra(); return false;"><img src="{$banner_url}" style="border:0" /></a>

08-08-2007, 15.12.18

mmm..ho fatto come hai detto ma niente :(!
non si mette il "withc".. :(..come lo metto più gradne?o.o..

**funcool** · 08-08-2007, 15.14.27

"width" non "withc". Leggi qui.

08-08-2007, 15.18.37

mmm..funziona grazie ^^..ma a quanto mi consigli?

**funcool** · 08-08-2007, 15.19.43

Non lo so (sicuramente più di 88 pixel), fai qualche tentativo finché ti sembra perfetto.

**dreadnaut** · 08-08-2007, 15.26.57

Mi permetto una piccola modifica alla funzione NascondiMostra, nel caso ci si voglia usare per più elementi (e levando la variabile globale):

Codice PHP:


<script type="text/javascript"> <!--
function NascondiMostra(elemento) {
  var elem = document.getElementById(elemento);
  if (elem != null) {
    if (elem.style.display == "none")
      elem.style.display = "block";
    else
      elem.style.display = "none";
  }
  return false;
} // -->
</script>

che va ora richiamata così:

Codice PHP:


<a href="#" onclick="return NascondiMostra('collegamento');">
 <img src="{$banner_url}" style="border:0" />
</a>

href="..." andrebbe sempre messo, così se javascript non è presente od è disattivato, viene seguito il link (che dovrebbe portare ad una pagina equivalente a ciò che il javascript mostrerebbe!)

**funcool** · 08-08-2007, 15.29.01

Al posto di:

Codice HTML:

<a href="#" onclick="return NascondiMostra("collegamento");">

Bisogna mettere:

Codice HTML:

<a href="#" onclick="return NascondiMostra('collegamento');">

Il discorso prima di href="#" era uscito perché lui lo aveva messo come parametro dell'immagine.

**dreadnaut** · 08-08-2007, 15.36.07

Originalmente inviato da funcool

Il discorso prima di href="#" era uscito perché lui lo aveva messo come parametro dell'immagine.

si, è decisamente meglio specificare che href va solo nei tag <a> </a>

parentesi: per ora. Fra i vari draft per xhtml2/html5/coso-strano-22 si prevede di permettere di inserire l'attributo href per tutti i tag!

08-08-2007, 16.04.02

ok grazie dreandnaut ma me ne serve solo 1 ^^..non devo usare più kose ;).. cmq nessuno sa suggerirmi la grandezza?o.o..e dopo il problema è ke se la ingrandisco si ingrandisce anche il div nascosto :( non c'è un modo per farlo restare della grandezza di default allargata dai links?o.o..grazie..ciao davide ^^..

Discussione: [JS]Mostra/Nascondi testo e img...come si fa?

LinkBack

Strumenti discussione

Display

[JS]Mostra/Nascondi testo e img...come si fa?

Regole di scrittura