• User

    Testo espandibile

    <HTML>
    <HEAD>
    <TITLE>Testo espandibile</TITLE>
    <STYLE TYPE="text/css">
    body {background:white}
    .fisso {color:blue; cursor:help}
    .espandile {color:red; font-size:14pt}
    .vuoto {display:none}
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
    function outliner() {
    var child =
    document.all[event.srcElement.getAttribute("child",
    false)];
    if (null != child)
    child.className = child.className == "vuoto" ?
    "espandile" : "vuoto";
    }
    </SCRIPT>
    </HEAD>
    <BODY ONCLICK="outliner();">
    <H1 CLASS="fisso" child="menu">
    Testo espandibile
    </H1>
    <DIV ID="menu" CLASS="vuoto">
    Questo testo viene visualizzato quando il nome di
    classe cambia da "vuoto" a "espandibile"
    </DIV>
    </BODY>
    </HTML>

    se crei la pagina con questo codice avrai la parola testo che cliccandola si apre sotto il testo" questo....".
    Il mio problema è avere questo effetto ripetuto più volte: esempio

    sulla pagina che vorrei c'è scritto "testo" clicco e si apre "questo......."
    sotto una diversa parola che apre un diverso testo e sotto ancora due....

    Ci ho provato in tutti i modi... sospetto vada creato un .vuoto2 nel primo script e vada cambiato il secondo script:
    ma come?

    Ciao!


  • Super User

    Ciao ecco la risposta al tuo problema:

    <html>
    <head>
    <title>Testo espandibile</title>
    <style type="text/css">
    body {background:white}
    .fisso {color:blue; cursor:help}
    .espandile {color:red; font-size:14pt}
    .vuoto {display:none}
    </style>
    <script language="JavaScript">
    function outliner() {
    var child =
    document.all[event.srcElement.getAttribute("child",
    false)];
    if (null != child)
    child.className = child.className == "vuoto" ?
    "espandile" : "vuoto";
    }
    </script>
    </head>
    <body onclick="outliner();">
    <h1 class="fisso" child="menu1"> Testo espandibile </h1>
    <div id="menu1" class="vuoto"> Questo testo viene visualizzato quando il nome di classe cambia da "vuoto" a "espandibile" </div>
    <h1 class="fisso" child="menu2"> Testo espandibile </h1>
    <div id="menu2" class="vuoto"> Questo testo viene visualizzato quando il nome di classe cambia da "vuoto" a "espandibile" </div>
    <h1 class="fisso" child="menu3> Testo espandibile </h1>
    <div id="menu3" class="vuoto"> Questo testo viene visualizzato quando il nome di classe cambia da "vuoto" a "espandibile" </div>
    </body>
    </html>

    Tutto chiaro vero? 🙂

    Ciao :ciauz:


  • User

    A una prima impressione mi sembra di poter rispondere assolutamente si alla tua domanda; poi andro' a mettere in pratica ( sul mio sito tra attività/gioco/index) e ora che l'ho detto se non ci riesco sono spu****ato

    Ma adesso vorrei capire come si fa a IMPARARE il css script eccetera? io personalmente vado per tentativi; a volte infruttuosi.
    Se tu mi rispondi subito; esiste un sistema per IMPARARE? Qual'è

    p.s. ancora Grazie


  • User Attivo

    Ciao Sandro,
    ti rimando ad un altro thread di questo forum:
    [url=http://www.giorgiotave.it/forum/viewtopic.php?t=5857]Guide CSS