Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    76

    come inserire un javascript in un div con spaziatore in una tabella?

    Riscrivo tutto sperando che ora non commetta Errori di titolo !!!
    Grazie per chi mi aiuta...
    Spero.
    Francesca

    -----

    Ciao a tutti. ho un problema.. ho un sito realizzato con tabelle e celle.
    Sto cercando come una matta da 3 gg di inserire uno "slideshow di immagini con links"
    senza pulsanti...Ma nella rete propongono tutti .. jquery e simili, oltremodo questi slideshow che trovo sono tutti inseriti in un "div" e io ho il sito fatto a tabelle.
    Mi potete aiutare?

    Grazie di cuore
    Francesca

    ----- Prima risposta

    Puoi mettere il div in una cella di una tabella.

    __________________
    http://www.linkedin.com/in/lucavizzi



    Mia replica.......

    ci ho provato...
    uffa...
    ecco il codice... Come vedi mi dice di creare "lo spaziatore"... (almeno credo che questa sia la trduzione) ="placeholder.gif" ... porca Pupazza...
    Sei un Angelo se mi aiuti.....
    ---

    Questo da inserire nell'head

    <body onload="ImageBook()">


    e questo nel body

    <script type="text/javascript">

    /***********************************************
    * Book Flip slideshow script- © Ger Versluis 2003
    * Permission granted to DynamicDrive.com to feature script
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    /************************************************** ******
    Create a div with transparent place holder in your html
    <div id="Book" style="position:relative">
    [img]placeholder.gif[/img]
    </div>
    width = 2*book image width +4 height = book image height+2

    Insert onload in body tag
    <body onload="ImageBook()">
    ************************************************** *******/

    // 7 variables to control behavior
    var Book_Image_Width=140;
    var Book_Image_Height=225;
    var Book_Border=true;
    var Book_Border_Color="gray";
    var Book_Speed=15;
    var Book_NextPage_Delay=1500; //1 second=1000
    var Book_Vertical_Turn=0;

    // array to specify images and optional links. At least 4
    // If Link is not needed keep it ""

    Book_Image_Sources=new Array(
    "file/photo1.jpg","http://www.dynamicdrive.com",
    "file/photo2.jpg","http://www.javascriptkit.com",
    "file/photo3.jpg","", //this slide isn't linked
    "file/photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
    );

    /***************** DO NOT EDIT BELOW **********************************/
    var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_D irection=1;
    var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

    function ImageBook(){
    if(document.getElementById){
    for(i=0;i<Book_Image_Sources.length;i+=2){
    B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
    Book_Div=document.getElementById("Book");
    B_LI=document.createElement("img");Book_Div.append Child(B_LI);
    B_RI=document.createElement("img");Book_Div.append Child(B_RI);
    B_MI=document.createElement("img");Book_Div.append Child(B_MI);
    B_LI.style.position=B_MI.style.position=B_RI.style .position="absolute";
    B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.z Index=1;
    B_LI.style.top=(Book_Vertical_Turn?Book_Image_Heig ht+1:0)+"px";
    B_LI.style.left=0+"px";
    B_MI.style.top=0+"px";
    B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
    B_RI.style.top=0+"px";
    B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
    B_LI.style.height=Book_Image_Height+"px";
    B_MI.style.height=Book_Image_Height+"px";
    B_RI.style.height=Book_Image_Height+"px";
    B_LI.style.width=Book_Image_Width+"px";
    B_MI.style.width=Book_Image_Width+"px";
    B_RI.style.width=Book_Image_Width+"px";
    if(Book_Border){
    B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI .style.borderStyle="solid";
    B_LI.style.borderWidth=1+"px";
    B_MI.style.borderWidth=1+"px";
    B_RI.style.borderWidth=1+"px";
    B_LI.style.borderColor=B_MI.style.borderColor=B_RI .style.borderColor=Book_Border_Color}
    B_LI.src=B_Pre_Img[0].src;
    B_LI.lnk=Book_Image_Sources[1];
    B_MI.src=B_Pre_Img[2].src;
    B_MI.lnk=Book_Image_Sources[3];
    B_RI.src=B_Pre_Img[4].src;
    B_RI.lnk=Book_Image_Sources[5];
    B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
    B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover =B_Stp;
    B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_ Rstrt;
    BookImages()}}

    function BookImages(){
    if(!B_Stppd){
    if(Book_Vertical_Turn){
    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_I mage_Height));
    MidOffset=!B_Direction?Book_Image_Height+1:Book_Im age_Height-B_MSz;
    B_MI.style.top=MidOffset+"px";
    B_MI.style.height=B_MSz+"px"}
    else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_I mage_Width));
    MidOffset=B_Direction?Book_Image_Width+1:Book_Imag e_Width-B_MSz;
    B_MI.style.left=MidOffset+"px";
    B_MI.style.width=B_MSz+"px"}
    B_Angle+=Book_Speed/720*Math.PI;
    if(B_Angle>=Math.PI/2&&B_Direction){
    B_Direction=0;
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_MI.src=B_Pre_Img[B_CrImg].src;
    B_MI.lnk=Book_Image_Sources[B_CrImg+1];
    B_CrImg+=2}
    if(B_Angle>=Math.PI){
    B_Direction=1;
    B_TI=B_LI;
    B_LI=B_MI;
    B_MI=B_TI;
    if(Book_Vertical_Turn)B_MI.style.top=0+"px";
    else B_MI.style.left=Book_Image_Width+1+"px";
    B_MI.src=B_RI.src;
    B_MI.lnk=B_RI.lnk;

    setTimeout("Book_Next_Delay()",Book_NextPage_Delay )}
    else setTimeout("BookImages()",50)}
    else setTimeout("BookImages()",50)}

    function Book_Next_Delay(){
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_RI.src=B_Pre_Img[B_CrImg].src;
    B_RI.lnk=Book_Image_Sources[B_CrImg+1];
    B_MI.style.zIndex=2;
    B_LI.style.zIndex=1;
    B_Angle=0;
    B_CrImg+=2;
    setTimeout("BookImages()",50)}

    function B_LdLnk(){if(this.lnk)window.location.href=this.ln k}
    function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"p ointer":"default"}
    function B_Rstrt(){B_Stppd=false}
    </script>

    <div id="Book" style="position:relative">
    [img]file/placeholder.gif[/img]
    </div>

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    76

    Re: come inserire un javascript in un div con spaziatore in una tabella?

    E' Impossibile fare ciò?
    Scusate, ma sono davvero nel caos con questo caspita di div e spaziatore da gestire...
    Grazie x il Vostro aiuto
    Francesca


    Originariamente inviato da walter04
    Riscrivo tutto sperando che ora non commetta Errori di titolo !!!
    Grazie per chi mi aiuta...
    Spero.
    Francesca

    -----

    Ciao a tutti. ho un problema.. ho un sito realizzato con tabelle e celle.
    Sto cercando come una matta da 3 gg di inserire uno "slideshow di immagini con links"
    senza pulsanti...Ma nella rete propongono tutti .. jquery e simili, oltremodo questi slideshow che trovo sono tutti inseriti in un "div" e io ho il sito fatto a tabelle.
    Mi potete aiutare?

    Grazie di cuore
    Francesca

    ----- Prima risposta

    Puoi mettere il div in una cella di una tabella.

    __________________
    http://www.linkedin.com/in/lucavizzi



    Mia replica.......

    ci ho provato...
    uffa...
    ecco il codice... Come vedi mi dice di creare "lo spaziatore"... (almeno credo che questa sia la trduzione) ="placeholder.gif" ... porca Pupazza...
    Sei un Angelo se mi aiuti.....
    ---

    Questo da inserire nell'head

    <body onload="ImageBook()">


    e questo nel body

    <script type="text/javascript">

    /***********************************************
    * Book Flip slideshow script- © Ger Versluis 2003
    * Permission granted to DynamicDrive.com to feature script
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    /************************************************** ******
    Create a div with transparent place holder in your html
    <div id="Book" style="position:relative">
    [img]placeholder.gif[/img]
    </div>
    width = 2*book image width +4 height = book image height+2

    Insert onload in body tag
    <body onload="ImageBook()">
    ************************************************** *******/

    // 7 variables to control behavior
    var Book_Image_Width=140;
    var Book_Image_Height=225;
    var Book_Border=true;
    var Book_Border_Color="gray";
    var Book_Speed=15;
    var Book_NextPage_Delay=1500; //1 second=1000
    var Book_Vertical_Turn=0;

    // array to specify images and optional links. At least 4
    // If Link is not needed keep it ""

    Book_Image_Sources=new Array(
    "file/photo1.jpg","http://www.dynamicdrive.com",
    "file/photo2.jpg","http://www.javascriptkit.com",
    "file/photo3.jpg","", //this slide isn't linked
    "file/photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
    );

    /***************** DO NOT EDIT BELOW **********************************/
    var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_D irection=1;
    var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

    function ImageBook(){
    if(document.getElementById){
    for(i=0;i<Book_Image_Sources.length;i+=2){
    B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
    Book_Div=document.getElementById("Book");
    B_LI=document.createElement("img");Book_Div.append Child(B_LI);
    B_RI=document.createElement("img");Book_Div.append Child(B_RI);
    B_MI=document.createElement("img");Book_Div.append Child(B_MI);
    B_LI.style.position=B_MI.style.position=B_RI.style .position="absolute";
    B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.z Index=1;
    B_LI.style.top=(Book_Vertical_Turn?Book_Image_Heig ht+1:0)+"px";
    B_LI.style.left=0+"px";
    B_MI.style.top=0+"px";
    B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
    B_RI.style.top=0+"px";
    B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
    B_LI.style.height=Book_Image_Height+"px";
    B_MI.style.height=Book_Image_Height+"px";
    B_RI.style.height=Book_Image_Height+"px";
    B_LI.style.width=Book_Image_Width+"px";
    B_MI.style.width=Book_Image_Width+"px";
    B_RI.style.width=Book_Image_Width+"px";
    if(Book_Border){
    B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI .style.borderStyle="solid";
    B_LI.style.borderWidth=1+"px";
    B_MI.style.borderWidth=1+"px";
    B_RI.style.borderWidth=1+"px";
    B_LI.style.borderColor=B_MI.style.borderColor=B_RI .style.borderColor=Book_Border_Color}
    B_LI.src=B_Pre_Img[0].src;
    B_LI.lnk=Book_Image_Sources[1];
    B_MI.src=B_Pre_Img[2].src;
    B_MI.lnk=Book_Image_Sources[3];
    B_RI.src=B_Pre_Img[4].src;
    B_RI.lnk=Book_Image_Sources[5];
    B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
    B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover =B_Stp;
    B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_ Rstrt;
    BookImages()}}

    function BookImages(){
    if(!B_Stppd){
    if(Book_Vertical_Turn){
    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_I mage_Height));
    MidOffset=!B_Direction?Book_Image_Height+1:Book_Im age_Height-B_MSz;
    B_MI.style.top=MidOffset+"px";
    B_MI.style.height=B_MSz+"px"}
    else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_I mage_Width));
    MidOffset=B_Direction?Book_Image_Width+1:Book_Imag e_Width-B_MSz;
    B_MI.style.left=MidOffset+"px";
    B_MI.style.width=B_MSz+"px"}
    B_Angle+=Book_Speed/720*Math.PI;
    if(B_Angle>=Math.PI/2&&B_Direction){
    B_Direction=0;
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_MI.src=B_Pre_Img[B_CrImg].src;
    B_MI.lnk=Book_Image_Sources[B_CrImg+1];
    B_CrImg+=2}
    if(B_Angle>=Math.PI){
    B_Direction=1;
    B_TI=B_LI;
    B_LI=B_MI;
    B_MI=B_TI;
    if(Book_Vertical_Turn)B_MI.style.top=0+"px";
    else B_MI.style.left=Book_Image_Width+1+"px";
    B_MI.src=B_RI.src;
    B_MI.lnk=B_RI.lnk;

    setTimeout("Book_Next_Delay()",Book_NextPage_Delay )}
    else setTimeout("BookImages()",50)}
    else setTimeout("BookImages()",50)}

    function Book_Next_Delay(){
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_RI.src=B_Pre_Img[B_CrImg].src;
    B_RI.lnk=Book_Image_Sources[B_CrImg+1];
    B_MI.style.zIndex=2;
    B_LI.style.zIndex=1;
    B_Angle=0;
    B_CrImg+=2;
    setTimeout("BookImages()",50)}

    function B_LdLnk(){if(this.lnk)window.location.href=this.ln k}
    function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"p ointer":"default"}
    function B_Rstrt(){B_Stppd=false}
    </script>

    <div id="Book" style="position:relative">
    [img]file/placeholder.gif[/img]
    </div>

  3. #3
    Utente bannato
    Registrato dal
    Apr 2009
    Messaggi
    530
    Originariamente inviato da walter04
    ... "slideshow di immagini con links"
    senza pulsanti...
    Cosa intendi con "links"?
    Che links (testo), cliccati, decidono che immagine mostrare
    - o -
    che l' immagine di volta in volta mostrata dallo slideshow in automatico, è anche link; cioè cliccandola si apre ad esempio, l' immagine grande in nuova finestra ?

    O entrambi, anche è possibile.

    Originariamente inviato da walter04
    ... ...Ma nella rete propongono tutti .. jquery e simili, ... tutti inseriti in un "div" e io ho il sito fatto a tabelle.
    In effetti non mi pare tu debba andare a sbattere la testa su roba "indecifrabile", quando sorbendoti invece 2-3 post dei miei puoi risolvere e pure imparare qualcosa, rompere il ghiaccio con JavaScript.

    Restiamo un momento al comando manuale e partiamo con l' esempio più piccolo del mondo.
    Il Tag &#60;img name="viewer" src=""&#62; che trovi nel BODY in fondo, lo puoi mettere nella cella che vuoi della tua pagina; e così pure fai per i link di richiamo senza preoccuparti di fantomatici "spaziatori":
    codice:
    <html>
    <head><title>Basic JS Images Viewer</title>
    
    <script type="text/javascript">
    
     var pictures = new Array();
    
      pictures[1] = "immagine.jpg";
      pictures[2] = "percorso/file.jpg";
      pictures[3] = "immagine12.jpg";
      pictures[4] = "cartella/foto-fiori.gif";
    
    
     function show(which){
    
        document.images['viewer'].src = pictures[which];
        
     }
    
    </script>
    
    </head><body>
    
     | 1 | 2 |
       3 | 4 | 
    
    
    
       [img][/img]
    
    
    </body>
    </html>
    Poi passi a compilare un Array con gli URL delle immagini (i percorsi alle immagini); l' Array l' ho chiamato pictures ma lo puoi anche chiamare Francesca
    IMPORTANTE è che i nomi dati (oltre a non contenere caratteri non-validi) siano poi rispettati, riportati nei vari comandi; quindi puoi anche fare:

    <img name="giorgio">
    con:
    document.images['giorgio'].src = Francesca[2] // questo comando cambia il Valore di SRC al Tag IMG che ha NAME="giorgio"

    Con Francesca[2] accedo a percorso/file.jpg ma sempre a quello.
    Ma passando un numeretto alla funzione, e glielo passiamo quando la chiamiamo con href="&#106;avascript: show(3);" "facciamo il trucco" di cambiare il numero indice in uso perché il numeretto lo "veicoliamo" come which al comando.
    Quindi possiamo scorrere l' Array prelevando (accedendo a) differenti articoli dell' Array.

    Per farlo in automatico, ricorreremo alle funzioni native di JavaScript, setTimeout() o setInterval() che ci mettono a disposizione dei timer.

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    76
    Ciao Enzaccio non ci speravo in una risposta... Grazie di cuore.
    Ora provo a dare un'occhiata a tutto cio' che gentilmente mi hai scritto, e domani a mente fresca... lo guardo e cerco di uscirne fuori con i tuoi suggerimenti.
    Grazie davvero tanto e se non ti disturbo domani, (nel caso avessi bisogno) ribusso al forum.
    Grazie ancora !!!!
    Francy

  5. #5
    Utente bannato
    Registrato dal
    Apr 2009
    Messaggi
    530
    Attenzione che mentre scrivevi stavo terminando il mio post e ho corretto per far apparire

    a href="&#106;avascript: numeFunzione();"

    invece di :

    a href="javascript: numeFunzione();"


    Il Forum spezza la parola &#106;avascript con un trattino.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.