Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11

Discussione: innerHTML e rel

  1. 18-12-2007, 19:54 #1
    tunino
    tunino non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2007
    Messaggi
    7

    innerHTML e rel

    Salve a tutti ecco la mia prima rikiesta di aiuto su questo forum
    ho una pagina html cn un menu a tendina ke mi genera tramite una funzione Js e con innerHTML il contenuto di un div ( mi carica delle thumbnail di una galleria di immagini);
    nelle immagini c'è un riferimento REL a una funzione js e un layout css x la visualizzazione di queste immagini ma nelle pagine create da innerHTML non lo considera mentre funziona in con le immagini iniziali ke sono di default nel codice html.
    Cosa posso fare? spero di essere stato kiaro (anke se scommetto di no ma io conoscendo il problema ho riletto e mi sembra di si grazie
    Rispondi quotando Rispondi quotando
  2. 19-12-2007, 02:39 #2
    Erith
    Erith non è in linea
    Utente di HTML.it L'avatar di Erith
    Registrato dal
    Jan 2006
    Messaggi
    222
    Il problema è semplice.
    Dovresti risettare gli eventi e le funzioni dopo che modifichi il dom.

    Ovvero se "bindi"(colleghi) ad esempio un click ad una funzione, facendolo dopo aver caricato il DOM (esempio con body onload), ogni qual volta lo modifichi aggiungendo elementi, i nuovi elementi non saranno collegati a nessun evento a meno che tu non scriva nell'html gli eventi (esempio se aggiungi un img mettere <img onlclick="fire()"/>) il problema è che di certo è javascript intrusivo.

    Il metodo migliore è quello di collegarli agli eventi dopo che li hai creati.

    una soluzione potrebbe essere il seguente pattern:

    nell'html hai

    Codice PHP:
    <body onload="collegaEventi()"> 
    e nel javascript hai

    function collegaEventi()
    {
    //funzione qui.
    }

    istruzioni che creano un nuovo elemento che deve essere collegato
    e alla fine di queste istruzioni chiamare di nuovo collegaEventi()

    ...
    è stato complesso da spiegare ma spero di essere stato abbastanza chiaro.

    Per chiarimenti, sono qua.
    Antonio Correnti
    www.resetstudio.it
    Rispondi quotando Rispondi quotando
  3. 19-12-2007, 11:28 #3
    tunino
    tunino non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2007
    Messaggi
    7

    mmh......

    Allora ti invio il codice ke ho spero potrà essere di aiuto

    nell'html:
    Codice PHP:
    <script type="text/javascript" language="JavaScript">
    <!--

            function     changeImage(form)

            {

                selection = form.gallery.value;window.reload;
        var     DivElement = document.getElementById("mainfoto");


    if(    selection=="cucine"){
    DivElement.innerHTML='<h3>Clicca per vedere la foto ingrandita</h3>'+
    '

    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">'    +
    '[img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]'+
    '</a></p>';
    }
    }
    //-->
    </script> 



    nell html devo mettere <body onload="changeImage()"> ? ?





    devo anke modificaer il javascript della funzione x la visualizzazione delle foto? cioè quella a cui punta il "rel=thumbnail"
    ??????


    grazie dell'aiuto
    Rispondi quotando Rispondi quotando
  4. 19-12-2007, 11:45 #4
    Erith
    Erith non è in linea
    Utente di HTML.it L'avatar di Erith
    Registrato dal
    Jan 2006
    Messaggi
    222
    Posti anche l'html interessato?
    Antonio Correnti
    www.resetstudio.it
    Rispondi quotando Rispondi quotando
  5. 19-12-2007, 14:14 #5
    tunino
    tunino non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2007
    Messaggi
    7
    Codice PHP:
    <form>
    <    select onchange=changeImage(this.form) name="gallery" size=8 >
    <    optgroup label="Moderno">
    <    option value="cucine">Cucine</option>
    <    option value="giorno">Zona Giorno</option>
    <    option value="notte">Zona notte</option>
    <    option value="letti">Letti</option>
    <    option value="divani">Divani</option>
    <    option value="armadi">Cabine e Armadi</option>
    <    option value="complementi">Complementi</option>
    </    optgroup>
    <    optgroup label="Classico">
    <    option value="cucine">Cucine</option>
    <    option value="giorno">Zona Giorno</option>
    <    option value="notte">Zona notte</option>
    <    option value="letti">Letti</option>
    <    option value="divani">Divani</option>
    <    option value="armadi">Cabine e Armadi</option>
    <    option value="complementi">Complementi</option>
    </    optgroup>
    </    select>
    </    form> 


    questo? scusa se nnho capito ke intendi ma come html interessato cosa ci sta? alla finec'è solo il menu ke da valore a selection poi scrive in un div maintesto ke ci sta e di default parte cn del codice htmo


    <div id="mainfoto">
    <h3>Clicca per vedere la foto ingrandita</h3>



    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]
    </a>
    </p>
    </div>


    e su questo ke parte di default le rel funzionano su quelle ke stanno su innerhtml no
    ps hoincollato lo stesso codice tra quello ke parte di default e quello ke genero poi se funzionainseriscdo foto diverse .non ho incollato tutto il javascript ma naturalmentetengo il codice e le foto relative a ognis celta grazie
    Rispondi quotando Rispondi quotando
  6. 19-12-2007, 16:43 #6
    tunino
    tunino non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2007
    Messaggi
    7
    Codice PHP:

    <!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">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <    title>Amodio Mobili</title>
    <    link rel="stylesheet" type="text/css" href="css/Stileassoluto1000.css">

    <    link rel="stylesheet" type="text/css" href="css/thumbnailviewer.css">

    <    script type="text/javascript" src="Js/thumbnailviewer.js">
    </script>

    <script type="text/javascript" language="JavaScript">
    <!--

    function ReloadTextDiv(ID, NewText) {
        var DivElement = document.getElementById(ID);
        DivElement.innerHTML = NewText;
    }
     function changeImage(form)

            {

            selection = form.gallery.value;window.reload;
        var DivElement = document.getElementById("mainfoto");


    if(selection=="cucine"){
    DivElement.innerHTML='<body onload="changeimage()"><h3>Clicca per vedere la foto ingrandita</h3>'+
    '

    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]'+
    '</a></p>';
    window.reload();
    }


    else if(selection=="giorno"){
    DivElement.innerHTML='<body onload="changeimage()"><h3>Giorno</h3>'+
    '

    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]'+
    '</a></p>';

    }       

            }

    //-->
    </script>




    </head>

    <body>


        <div id="container">




            <div id="testa" >[img]immagini/a.png[/img]</div>

    <div id="menu">

    [url="index.html"][img]immagini/home.jpg[/img][/url]
    [url="ChiSiamo.html"][img]immagini/chisiamo.jpg[/img][/url]
    [url="Galleria.html"][img]immagini/gallery.jpg[/img][/url]
    [url="Partner.html"][img]immagini/partner.jpg[/img][/url]
    [url="Servizi.html"][img]immagini/servizi.jpg[/img][/url]
    [url="Contatti.html"][img]immagini/contatti.jpg[/img][/url]
    </div>


        <div id="main" >
    <div id="mainfoto">

    <h3>Clicca per vedere la foto ingrandita</h3>




    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]
    </a>
     
    <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]
    </a>
     <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]
    </a>
     <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]
    </a>
     <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">

    [img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]
    </a>
     
    </p>

    </div>

    <div id="maintesto">

    <h3>Galleria Letti</h3>


    <h2>Ecco alcuni esempi </h2>





    <table><tr><td>

    <form>
    <select onchange=changeImage(this.form) name="gallery" size=8 >
    <optgroup label="Moderno">
    <option value="cucine">Cucine</option>
    <option value="giorno">Zona Giorno</option>
    <option value="notte">Zona notte</option>
    <option value="letti">Letti</option>
    <option value="divani">Divani</option>
    <option value="armadi">Cabine e Armadi</option>
    <option value="complementi">Complementi</option>
    </optgroup>
    <optgroup label="Classico">
    <option value="cucine">Cucine</option>
    <option value="giorno">Zona Giorno</option>
    <option value="notte">Zona notte</option>
    <option value="letti">Letti</option>
    <option value="divani">Divani</option>
    <option value="armadi">Cabine e Armadi</option>
    <option value="complementi">Complementi</option>
    </optgroup>
    </select>
    </form>

    </td><td align="center"><h2><blink>Clicca qui per accedere 
    alle nostre PROMOZIONI!!</blink></h2>[img]immagini/promo.jpg[/img]</td></tr></table>

    </div>
    </div>
     <div id="fondo">WEBMASTER</div>
        </div>
    </body>
    </html> 
    Rispondi quotando Rispondi quotando
  7. 19-12-2007, 17:12 #7
    Erith
    Erith non è in linea
    Utente di HTML.it L'avatar di Erith
    Registrato dal
    Jan 2006
    Messaggi
    222
    Ciao intanto ti chiedo di provare così

    Codice PHP:
    <!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">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <    title>Amodio Mobili</title>
    <    link rel="stylesheet" type="text/css" href="css/Stileassoluto1000.css">

    <    link rel="stylesheet" type="text/css" href="css/thumbnailviewer.css">

    <    script type="text/javascript" src="Js/thumbnailviewer.js">
    </script>

    <script type="text/javascript" language="JavaScript">
    <!--

    function ReloadTextDiv(ID, NewText) {
        var DivElement = document.getElementById(ID);
        DivElement.innerHTML = NewText;
    }
    function changeImage(form)

            {

            selection = form.value;
            var DivElement = document.getElementById("mainfoto");


    if(selection=="cucine"){
    DivElement.innerHTML='<body onload="changeimage()"><h3>Clicca per vedere la foto ingrandita</h3>'+
    '

    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]'+
    '</a></p>';
    }


    else if(selection=="giorno"){
    DivElement.innerHTML='<body onload="changeimage()"><h3>Giorno</h3>'+
    '

    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]'+
    '</a>   <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">'+
    '[img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]'+
    '</a></p>';

    }       

            }

    //-->
    </script>




    </head>

    <body>


        <div id="container">




            <div id="testa" >[img]immagini/a.png[/img]</div>

    <div id="menu">

    [url="index.html"][img]immagini/home.jpg[/img][/url]
    [url="ChiSiamo.html"][img]immagini/chisiamo.jpg[/img][/url]
    [url="Galleria.html"][img]immagini/gallery.jpg[/img][/url]
    [url="Partner.html"][img]immagini/partner.jpg[/img][/url]
    [url="Servizi.html"][img]immagini/servizi.jpg[/img][/url]
    [url="Contatti.html"][img]immagini/contatti.jpg[/img][/url]
    </div>


        <div id="main" >













    <div id="mainfoto">

    <h3>Clicca per vedere la foto ingrandita</h3>




    <a href="immagini/galleria/moderno/cucine/carrera_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbcarrera.jpg[/img]
    </a>

    <a href="immagini/galleria/moderno/cucine/oyster_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumboyster.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/diamante_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbdiamante.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/ginger_(1).jpg" rel="thumbnail">
    [img]immagini/galleria/moderno/cucine/thumbginger.jpg[/img]
    </a>
    <a href="immagini/galleria/moderno/cucine/extra_(1).jpg" rel="thumbnail">

    [img]immagini/galleria/moderno/cucine/thumbextra.jpg[/img]
    </a>

    </p>

    </div>







    <div id="maintesto">


    <h3>Galleria Letti</h3>


    <h2>Ecco alcuni esempi </h2>





    <table><tr><td>

    <form name="ciao">
    <select onchange=changeImage(this) name="gallery" size=8 >
    <optgroup label="Moderno">
    <option value="cucine">Cucine</option>
    <option value="giorno">Zona Giorno</option>
    <option value="notte">Zona notte</option>
    <option value="letti">Letti</option>
    <option value="divani">Divani</option>
    <option value="armadi">Cabine e Armadi</option>
    <option value="complementi">Complementi</option>
    </optgroup>
    <optgroup label="Classico">
    <option value="cucine">Cucine</option>
    <option value="giorno">Zona Giorno</option>
    <option value="notte">Zona notte</option>
    <option value="letti">Letti</option>
    <option value="divani">Divani</option>
    <option value="armadi">Cabine e Armadi</option>
    <option value="complementi">Complementi</option>
    </optgroup>
    </select>
    </form>

    </td><td align="center"><h2><blink>Clicca qui per accedere 
    alle nostre PROMOZIONI!!</blink></h2>[img]immagini/promo.jpg[/img]</td></tr></table>

    </div>
    </div>
    <div id="fondo">WEBMASTER</div>
        </div>
    </body>
    </html> 
    Come seconda cosa ti dico:
    a) E' completamente sbagliato l'iter progettuale della pagina, può comunque funzionare tutto, ma avere un dom pulito e valido w3c, ti farebbe sudare di meno in fase di scripting. (esempio... non puoi inserire con innerHTML un body dentro un div!!!)
    b) Il metodo che cercavi di usare dell'oggetto window (reload) non esiste in questa forma, la sintassi corretta è window.location.reload().

    A mio avviso, partendo da un html più pulito riuscirai sicuramente a creare script più coincisi e meno intrusivi.
    Antonio Correnti
    www.resetstudio.it
    Rispondi quotando Rispondi quotando
  8. 19-12-2007, 17:16 #8
    tunino
    tunino non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2007
    Messaggi
    7
    innanzitutto grazie ora vado a provare cn quello ke mi hai scritto tu
    volevo solo dirti ke sto esaurito so appena tornato dall'uni e ke il body e il window reload all'interno dell'html li tenevo solo come prova xkè nn avevo capito cosa mi avevi suggerito nella tua prima risposta non avrei dovuto scriverli a tra 5 minuti il tempo ke provo il tuo consiglio
    Rispondi quotando Rispondi quotando
  9. 19-12-2007, 17:26 #9
    tunino
    tunino non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2007
    Messaggi
    7
    ekkime ...provato niente solita cosa nn mi apre le immagini con rel
    ps ti va d sentirci su msn magari e se troviamo la soluzione la postiamo qui? grazie
    www.ilmiocontatto.it@hotmail.it
    Rispondi quotando Rispondi quotando
  10. 19-12-2007, 17:46 #10
    Erith
    Erith non è in linea
    Utente di HTML.it L'avatar di Erith
    Registrato dal
    Jan 2006
    Messaggi
    222
    ti ho mandato un pm con il mio indirizzo msn.
    Ciao!
    Antonio Correnti
    www.resetstudio.it
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.