• User Newbie

    [Risolto] DHTML: Intro

    Spero mi possiate essere d'aiuto visto che l'autore ( il presunto ) dello script non mi ha mai risposto!!!

    Io ho uno script in DHTML che come potete vedere è un semplice intro... SCRIPT
    (Nel link lo script è pressochè uguale all'originale, sono solo modificate le 4 scritte a sinistra dei cerchi).
    Le scritte laterali ai cerchi.. il mio problema!!

    Le scritte sono quattro immagini con dimensioni ognugna diversa e con destinazioni ognugna diversa. Il mio desiderio/intento è quello di creare quattro immagini con dimensioni uguali ( es. 233*53 ) e di applicarle allo scrip in modo che si allineano tutte verticalmente.. dopo sarò io a modificare il testo all'interno delle quattro immagini con orientamento a piacere. Cosa che adesso risulta impossibile poichè, ripeto, si posizionano ognuna in un posto diverso e rendono impossibile un'allineamento.

    Con la speranza di essere stato il più chiaro possible
    In attesa di una qualche risposta
    Grazie in anticipo
    Michael, Zeus

    *** Segue il codice della pagina ( ORIGINALE, senza modifiche ) ***

    <html>
    <head>
    <TITLE>[.:° JsDir °:. JavaScript .:° Scripts, Tutorials, DHTML, Faq, Libri, Documenti, Servizi, e-commerce, Consulenza. °:. Bring Your Site To Life®](http://www.jsdir.com) - SiteIntro</TITLE>
    <script language="javascript">
    //--fabianoATjsdir.com-------
    //--http://www.jsdir.com--------
    //--copyright © 2001-------
     
    // ------------------------------------------------------------------------------------------------------------ Inizio Sezione modificabile --
    phh=new Array(); // Immagini
        phh[0]="http://www.giorgiotave.it/forum/images/palla0.gif"; // immagine - primo bottone
        phh[1]="http://www.giorgiotave.it/forum/images/palla1.gif"; // immagine - secondo bottone
        phh[2]="http://www.giorgiotave.it/forum/images/palla0.gif"; // immagine - terzo bottone
        phh[3]="http://www.giorgiotave.it/forum/images/palla1.gif"; // immagine - quarto bottone
        phh[4]="http://www.giorgiotave.it/forum/images/jss.gif"; // immagine - testo per il primo bottone
        phh[5]="http://www.giorgiotave.it/forum/images/dhtml.gif"; // immagine - testo per il secondo bottone
        phh[6]="http://www.giorgiotave.it/forum/images/css.gif"; // immagine - testo per il terzo bottone
        phh[7]="http://www.giorgiotave.it/forum/images/html.gif"; // immagine - testo per il quarto bottone
        phh[8]="http://www.giorgiotave.it/forum/images/logojsdir4.gif"; // immagine - Logo del vostro sito
    var Link2Go="http://www.jsdir.com/"; //Link da aprire al termine dell'introduzione
    // ------------------------------------------------------------------------------------------------------------- Fine Sezione modificabile --
     
    //-------browser sniff--------------
    var isOp=(navigator.userAgent.toLowerCase().indexOf('opera') !=-1)?true:false
    var isOp5=(isOp && navigator.userAgent.toLowerCase().indexOf('5') !=-1)?true:false
    var nome=(navigator.appName=="Microsoft Internet Explorer")?true:false;
    var wt=nome?(navigator.appVersion.split(';').toString().split(" ").toString().split(',')[4] ):null;
    var isie5=((wt)>=5 && nome)?true:false;
    var isie4=((wt <5 && wt >=4) && nome)?true:false;
    var isNS4=(document.layers)?true:false;
    var isNS6=document.getElementById && (navigator.appName=="Netscape")?true:false;
    var isIE4=document.all?true:false;
    var isIE5=document.getElementById && (navigator.appName=="Microsoft Internet Explorer")?true:false;
    var sty=(isie4 || isie5 || isNS6)?'hidden':(isNS4)?'hide':'hidden'
    var stv=(isie4 || isie5 || isNS6)?'visible':(isNS4)?'show':'visible'
    var isd=(isie5 || isNS6)?document:(isNS4)?document.layers:document.all
    //----------------------------------------
    prx=0;
    ax=0;
    ay=0;
    bx=new Array(-100,-100,-100,-100,-300,-250,-250,-250,-250)
    by=-100
    ww=0;
    wy=0;
    //-----------------------------------------
    function qql(){
    if (isie4 || isie5){
    sl=document.body.clientWidth;
    sa=document.body.clientHeight;
    }
    else if (isNS6 || isNS4){
    sl=window.innerWidth;
    sa=window.innerHeight;
    }
    prx=(parseInt(sl/2)-20)
    pry=(parseInt(sa/2)-150)
    ax=new Array((prx+20),(prx+20),(prx+20),(prx+20),(prx-310),(prx-220),(prx-210),(prx-210),(prx+120))
    ay=new Array(pry,(pry+70),(pry+140),(pry+210),(pry+10),(pry+80),(pry+150),(pry+220),(pry+50))
    }
    //---------------------------
    crp=new Array()
    //-------------preload-------------
    imm=new Array()
    for(j=0; j<phh.length; j++){
    imm[j]=new Image()
    imm[j].src=phh[j]
    }
    //----------------------------------------------
    function crealiv(){
    if(isie5 || isNS6){
    for(i=0; i<9; i++){
    tt=document.createElement('div')
    document.body.appendChild(tt)
    tt.id="pp"+*
    tt.style.position="absolute"
    tt.style.top=ay*
    tt.style.left=bx*
    tt.style.background="white"
    tt.style.visibility=stv
    ll=document.createElement('a')
    document.getElementById('pp'+*).appendChild(ll)
    ll.id="ddf"+*
    ph=document.createElement('img')
    document.getElementById('ddf'+*).appendChild(ph)
    ph.src=imm*.src
    ph.border=0
    }
    }
    }
    //------------NS4------------------
    if(isNS4){
    for(i=0; i<9; i++){
    aaa="pp"+*
    document.write('<layer name=\"'+(aaa)+'\" visibility=\"'+(stv)+'\" top=\"'+(ay*)+'\" left=\"'+(bx*)+'\" ><img src=\"'+(imm*.src)+'\"></layer>') 
    document.close()
    }
    }
    //-------------IE4-----------------
    if(isie4){
    for(i=0; i<9; i++){
    ax=ax+30
    ay=ay+30
    aaa="pp"+*
    document.write('<div id=\"'+(aaa)+'\" style="position:absolute; visibility:'+(stv)+'; top:'+(ay*)+'; left:'+(bx*)+'; "><img src=\"'+(imm*.src)+'\"></div>') 
    document.close()
    }
    }
    //--------posiz------------------------------
    function pos()
        {
        for(y=0; y<ww; y++)
            {
            for(g=0; g<50; g++)
                {
                bx[y]=bx[y]+1
                if(bx[y]==ax[y])
                    {
                    clearTimeout(bbx)
                    bx[y]=bx[y]-1
                    }
                }
            }
        for(y=0; y<4; y++)
            {
            crp[y]=(isie5 || isNS6)?(isd.getElementById('pp'+[y]).style):(isNS4)?(isd['pp'+[y]]):isd['pp'+[y]].style
            crp[y].top=ay[y]
            crp[y].left=bx[y]
            }
        bbx=setTimeout('pos()',10)
        }
     
    bbx=setTimeout('pos()',1000)
     
    //----------------pos testo--------------
    function pos2(){
    for(h=4; h<ww; h++){
    for(gg=0; gg<50; gg++){
    bx=bx+1
    if(bx==ax){
    clearTimeout(bbxx)
    bx=bx-1
    }
    }
    }
    for(r=4; r<8; r++){
    crp=(isie5 || isNS6)?(isd.getElementById('pp'+).style):(isNS4)?(isd['pp'+]):isd['pp'+].style
    crp.top=ay
    crp.left=bx
    }
    bbxx=setTimeout('pos2()',10)
    }
    bbxx=setTimeout('pos2()',6000)
    //-------------pos logo-----------
    function pos3(){
    for(gh=0; gh<100; gh++){
    by=by+1
    if(by==ay[8]){
    clearTimeout(bbxxx)
    by=by-1
    }
    }
    crp[8]=(isie5 || isNS6)?(isd.getElementById('pp'+[8]).style):(isNS4)?(isd['pp'+[8]]):isd['pp'+[8]].style
    crp[8].top=by
    crp[8].left=ax[8]
    bbxxx=setTimeout('pos3()',10)
    }
    bbxxx=setTimeout('pos3()',8000)
    //---------------------------------
    function vai(){
    for(p=0; p<wy; p++){
    crp[p]=(isie5 || isNS6)?(isd.getElementById('pp'+[p]).style):(isNS4)?(isd['pp'+[p]]):isd['pp'+[p]].style
    crp[p].visibility=sty
    if(p==8){
    clearTimeout(bbs)
    }
    }
    bbs=setTimeout('vai()',10)
    }
    //------------timer-------------
    function jkl(){
    if(ww>=4){
    clearTimeout(ss)
    }
    ww=ww+1
    ss=setTimeout('jkl()',1000)
    }
    ss=setTimeout('jkl()',1000)
    //-----------timer-------------
    function jkx(){
    if(ww>=8){
    clearTimeout(sx)
    }
    ww=ww+1
    sx=setTimeout('jkx()',2000)
    }
    sx=setTimeout('jkx()',7000)
    //----------------------------------
    function jky(){
    if(wy>=9){
    clearTimeout(sy)
    wy=wy-1
    }
    wy=wy+1
    sy=setTimeout('jky()',100)
    }
    //--------link----------------
    function lhh(){
    document.location=Link2Go;
    }
    setTimeout('lhh()',13000)
    </script>
    </head>
    <body bgcolor="black" onLoad="qql();crealiv();setTimeout('vai();jky()',11000)" onResize="location.reload()">
    <div id="sk" style="position:absolute; top:10; left:10"><a href="javascript:lhh()" style="text-decoration:none;"><font color="#FFFFFF" size="2" face="Verdana"><b>skip intro</b></font></a></div>
    </body>
    </html>
    

    Editato da Claudioweb per inserire il codice tra i tag [ CODE] [ /CODE]


  • Super User

    Ciao 🙂

    trova nel codice questa parte

    for(r=4; r<8; r++){
    crp=(isie5 || isNS6)?(isd.getElementById('pp'+).style):(isNS4)?(isd['pp'+]):isd['pp'+].style
    crp.top=ay
    crp.left=bxr]
    }
    

    e sostituiscila con questa:

    for(r=4; r<8; r++){
    crp=(isie5 || isNS6)?(isd.getElementById('pp'+).style):(isNS4)?(isd['pp'+]):isd['pp'+].style
    crp.top=ay
    crp.left=bx4]
    }
    

    In questo modo fissi la posizione lungo l'asse X delle immagini contenenti i testi.

    Ciao :ciauz:


  • User Newbie

    Semplicemente grazieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee Claudio!!!


  • User Newbie

    Ciao sono un nuovo utente del forum GT..mi inserisco in questa discussione con la speranza di ricevere come Zeus un piccolo aiuto per la stessa intro ....il mio problema è dato dal fatto che i quattro testi immagine compaiono troppo velocemente....su quali parti di codice occorre agire per modificare la velocità di ognuno dei quattro testi?
    Allego codice
    Ringrazio anticipatamente


  • Super User

    Ciao 🙂

    Benvenuto nel forum.

    Ora non ricordo più come funzionava lo script, comunque dovresti andare ad operare sui timer che sono tutti i

    setTimeout()

    Ti basta variare il numero passato come secondo parametro, che è espresso in millesimi di secondi.
    Prova a cambiarne qualcuno e vedrai che potrai regolare tutte le velocità che ti interessano.


  • User Newbie

    Ciao Claudio..ho risolto.....ti ringrazio infinitamente..
    non vorrei approfittarne ma se non ti disturbo troppo potresti dirmi dove agire per variare la distanza tra le quattro immagini poste in verticale( l'intro è composta da quattro immagini sulla destra e quattro testi immagine sulla sinistra)..ancora grazie


  • Super User

    Ciao, non ho tempo per farlo io.
    Dovresti vedere dove è definito lo style e inserire un po' di margin.

    Per puro esempio, senza nemmeno vedere a che serve quella parte di codice, dove trovi scritto

    document.write('<div id="'+(aaa)+'" style="position:absolute; visibility:'+(stv)+'; top:'+(ay*)+'; left:'+(bx*)+'; "><img src="'+(imm*.src)+'"></div>')

    modifichi in qualcosa di simile:

    document.write('<div id="'+(aaa)+'" style="position:absolute; margin:100px; visibility:'+(stv)+'; top:'+(ay*)+'; left:'+(bx*)+'; "><img src="'+(imm*.src)+'"></div>')

    prova un po'... Dovrebbe andare.

    Ciao


  • User Newbie

    Ciao Claudio..ho fatto come hai scritto tu ma sembra che inserendo il margin e anche aumentandolo di valore non cambi niente..la distanza tra le immagini in verticale è la stessa...ho invece visto che cambia qualcosa nella distanza modificando i valori in questa parte di codice
    ax=new Array((prx+20),(prx+20),(prx+20),(prx+20),(prx-310),(prx-220),(prx-210),(prx-210),(prx+120))
    ay=new Array(pry,(pry+70),(pry+140),(pry+210),(pry+20),(pry+80),(pry+150),(pry+220),(pry+50))..non avendo molta dimestichezza non ho risolto e ho fatto solo qualche sconvolgimento ..se puoi fammi sapere
    grazie