• User Attivo

    b'è....per fare il bel effetto che hai visto, io ti consiglio jquery, ti verrà molto semplice poi....se ti piace l'idea di jquery....appena ho 5 secondi di tempo libero....ti metto giù un bel esempio! 😉

    comunque, il principio è sempre lo stesso....è solo mettere giù diversamente le cose!


  • User Attivo

    Diciamo che jquery vada bene....

    vediamo di mettere giù un po di codice....

    [HTML]
    <script type="text/javascript" src="INCLUSIONE DI JQUERY"></script>
    <script>
    //esempio base
    $(document).ready(function(){

    $("#banner_exp").mouseover(function(){
    
        $("#banner_exp").animate({height: "300px"}, 1500 );
    
    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#banner_exp").animate({height: "50px"}, 1500 );
        
    });
    

    });

    //Esempio con modifica di contenuto
    $(document).ready(function(){

    $("#banner_exp").mouseover(function(){
    
        $("#banner_exp").html("Linea 2 in espandione!").animate({height: "300px"}, 1500 );
    
    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#banner_exp").html("Linea 2").animate({height: "50px"}, 1500 );
        
    });
    

    });

    </script>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td style="height:50px; background-color:#00FF00">
    Linea1
    </td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td id="banner_exp" valign="top" style="height:50px; background-color:#FF0000;">
    linea2
    </td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td style="height:50px; background-color:#00FF00">
    Linea3
    </td>
    </tr>
    </table>
    [/HTML]


  • User

    Prima di tutto ti ringrazio del tuo interessamento ...

    però riguardo all'esempio, vedo 3 rettangoli statici 1 verde/ 1 rosso / 1 verde ...


  • User Attivo

    [html]<script type="text/javascript" src="INCLUSIONE DI JQUERY"></script>[/html]hai messo l'inclusione di jquery???

    io l'ho provato prima di postarlo [edit] con FireFox[/edit].....e mi funzionava perfettamente....tanto che ne voglio fare uno standard da utilizzare ovunque! 😉

    trasforma quel'inclusione di prima in questo:
    [html]<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>[/html]


  • User

    mea cupla! non ero stato attento ed avevo copiato pari pari il tuo esempio senza inclusione... funziona perfettamente!

    quindi non mi resta che inserire le immagini in queste tabelle ... giusto?

    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td style="height:50px; background-color:#00FF00">
    Linea1
    </td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td id="banner_exp" valign="top" style="height:50px; background-color:#FF0000;">
    linea2
    </td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td style="height:50px; background-color:#00FF00">
    Linea3
    </td>
    </tr>
    </table>


  • User Attivo

    b'è....questo è un esempio....ora il limite è la fantasia.....

    con il 1° esempio espandi soltanto...con il 2° invece sostituisci anche il contenuto....

    se poi hai già qualcosa di fatto....cerca di riadattare il tutto a quello che hai!

    lavoraci su un po....se hai dubbi....siamo tutti qui!!!!


  • User

    ho fatto due tentativi ma non riesco ...

    ho due rettangoli che ho ritagliato a 300x50px

    <img src="rectangle_A.jpg" />

    <img src="rectangle_B.jpg" />

    da quanto ho capito, dovrei inserirli in questo modo:

    [HTML]
    //Esempio con modifica di contenuto
    $(document).ready(function(){
    $("#banner_exp").mouseover(function(){

        $("#banner_exp").html("<img src='rectangle_A.jpg' />").animate({height: "300px"}, 500 );
    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#banner_exp").html("'rectangle_B.jpg'").animate({height: "50px"}, 500 );
        
    });
    

    });
    [/HTML]

    ma non c'è verso ...


  • User Attivo

    [HTML]//Esempio con modifica di contenuto
    $(document).ready(function(){
    $("#banner_exp").mouseover(function(){

        $("#banner_exp").html("<img src='rectangle_A.jpg' />").animate({height: "300px"}, 500 );
    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#banner_exp").html("'<img src='rectangle_B.jpg' />").animate({height: "50px"}, 500 );
        
    });
    

    }); [/HTML]

    prova così!


  • User

    [html]

    <script>
    //esempio base
    $(document).ready(function(){
    $("#banner_exp").mouseover(function(){

        $("#banner_exp").animate({height: "300px"}, 500 );
    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#banner_exp").animate({height: "50px"}, 500 );
    
    });
    

    });
    //Esempio con modifica di contenuto
    $(document).ready(function(){
    $("#banner_exp").mouseover(function(){

        $("#banner_exp").html("<img src='rectangle_A.jpg' />").animate({height: "300px"}, 500 );
    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#banner_exp").html("<img src='rectangle_B.jpg' />").animate({height: "50px"}, 500 );
    
    });
    

    });
    </script>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td style="height:50px; background-color:#00FF00">
    Linea1
    </td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td id="banner_exp" valign="top" style="height:50px;">
    linea2
    </td>
    </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
    <td style="height:50px; background-color:#00FF00">
    Linea3
    </td>
    </tr>
    </table>
    [/html]

    ma il risultato non cambia ...

    lo puoi vedere in questo link

    mecox.com/home7.php

    ps. ho omesso il link allo script poichè altrimenti non mi fa inviare il post


  • User Attivo

    hmmmm.....

    questa cosa mi giunge assai strana.....

    vedo di capire dov'è il problema....


  • User

    Ciao Daigor ... hai avuto modo di capire che cosa è successo?


  • User Attivo

    sto ancora cercando di capire, ma credo che il problema stia nel fatto che quando cambia img al'interno, lo interpreti come mouseout...quindi per risolvere bisogna mattere l'immagine come sfondo....al più presto un esempio...


  • User

    Ciao Daigor...

    ho navigato un po ma non ho trovato riscontri, tu sei riuscito ad individuare il problema?

    Ciao
    Enrico


  • User Attivo
    <script type="text/javascript" src="INCLUSIONE DI JQUERY"></script>
    <script>
    $(document).ready(function(){
    
        $("#banner_exp").mouseover(function(){
        
            $("#linea_2").css({background: "url(immagine1.jpg)"});
            $("#banner_exp").animate({height: "300px"}, 1500 );
    
        });
        
        $("#banner_exp").mouseout(function(){
        
            $("#linea_2").css({background: "url(immagine2.jpg)"});
            $("#banner_exp").animate({height: "50px"}, 1500 );
            
        });
    
    });
    
    </script>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
        <tr>
            <td style="height:50px; background-color:#00FF00">
            Linea1
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
        <tr>
            <td id="linea_2" valign="top" style="height:50px; background-color:#FF0000;">
            <img id="banner_exp" height="50" width="100%" />
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
        <tr>
            <td style="height:50px; background-color:#00FF00">
            Linea3
            </td>
        </tr>
    </table>
    ```prova così!

  • User

    nulla!!!... adesso manco si apre :arrabbiato:


  • User Attivo

    questo l'hai messo?

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    

    P.S.
    l'immagine deve essere trasparente, così da poter visualizzare lo sfondo, che sarà l'immagine del banner!


  • User Attivo
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){
    
        $("#banner_exp").mouseover(function(){
        
            $("#linea_2").css({background: "url(immagine1.jpg)"});
            $("#banner_exp").animate({height: "300px"}, 1500 );
    
        });
        
        $("#banner_exp").mouseout(function(){
        
    
            $("#banner_exp").animate({height: "50px"}, 1500, function(){
                   $("#linea_2").css({background: "url(immagine2.jpg)"});
            });
            
        });
    
    });
    
    </script>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
        <tr>
            <td style="height:50px; background-color:#00FF00">
            Linea1
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
        <tr>
            <td id="linea_2" valign="top" style="height:50px; background-color:#FF0000;">
            <img id="banner_exp" height="50" width="100%" />
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" width="300">
        <tr>
            <td style="height:50px; background-color:#00FF00">
            Linea3
            </td>
        </tr>
    
    

    </table>Piccolo aggiornamento!

    Prima appena fuori dalla sensibilità cambiava, ora aspetta che finisca il ridimensionamento!

    a me qui funziona come funzionava prima....

    fammi sapere!


  • User

    Ciao Daigor...

    ho provato lo script e funziona, per quanto riguarda il movimento ma con qualche anomalia:

    1- Uno strano effetto refresh quando cambia immagine
    2- Sopra alle immagini c'è quella trasparente ma viene visualizzato il quadratino che lo indica che è molto antiestetico

    Anche te rilevi questo? Secondo te come si potrebbe risolverli?


  • User Attivo

    Esiste l'immagine trasparente????

    per il movimento....e il caricamento....non ho trovato anomalie!

    spiegati un po di più....magari capisco meglio!!!


  • User

    forse mi sono spiegato male ...