Elenco prodotti con jquery

[pippuccio76]

Salve vorrei creare un elenco di prodotti con jquery , sulla sinistra creo il menu e con toggle appare il submenu e fin qui ci siamo...vorrei che alla pressione dei submenu apparisse l'immagine del prodotto ,cosa che sono riuscito a fare

$('#immagine').css("background-image", "url(mia_immagine.jpg) ");

Il problema è che il sito deve essere responsive e per far apparire qualcosa devo dare al div immagine un altezza e una larghezza che ho dato in percentuale , per far apparire immagini ho poi inserito dei <br> e il risultato sembrerebbe buono se non che quando riduco le dimensioni della pagina l'immagine viene si ridotta ma perchè viene tagliata, c'è un modo migliore per effettuare questa operazione e far si che l'immagine venga rimpocciolita in percentuale?

[cavicchiandrea]

Ma nella spiegazione (non chiarissima) cosa centra jquery e js e comunque non mi sembra sia possibile ridimensionare delle immagini di sfondo

[pippuccio76]

Ma nella spiegazione (non chiarissima) cosa centra jquery e js e comunque non mi sembra sia possibile ridimensionare delle immagini di sfondo

Chiedevo appunto se era possibile invece di cambiare il background-image fare in un altro modo ...

[cavicchiandrea]

Senza conoscere lo sviluppo del progetto credo sia impossibile fare ipotesi

[pippuccio76]

Senza conoscere lo sviluppo del progetto credo sia impossibile fare ipotesi

ecco la pagina prodotti:

<?php
    include 'Parti/parti.php';
       echo $superiore;
?>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div class="row" id="contenuti">
    <div class="span3" id="menulat">
        <a href="#" id="processori" ><h4 >Processori</h4></a>
            <ul id="processori1"  style="display: none;">
                <li><a href="#" id="proce1"><h5 >Amd</h5></a></li>
                <li><a href="#" id="proce2"><h5 >Intel</h5></a></li>
            </ul>    
        
        <a href="#" id="video"><h4>Schede Videoi</h4></a>

    </div>    
    <div class="span 9" id="foto">
        
            <br>
    <br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br><br>
    <br>
    <br>
    <br>

    </div>





</div>
    

    <script>
        $( "#processori" ).click(function() {
        $( "#processori1" ).toggle( "slow" );
        });


        $('#proce1').click(function()
        {
          $('#foto').css("background-image", "url(img/articoloa.jpg) ");  
        });

        $('#proce2').click(function()
        {
          $('#foto').css("background-image", "url(img/articolob.jpg) ");  
        });
    </script>








    </div> <!-- Chiusura container -->
     <script src="js/bootstrap.min.js"></script>
     
</body>
</html>

E il css

body{
    background-image: url('../img/bg01.png');
}
#container{
    text-align: center;
}

#testata{
  
    
}

#menu{
    text-align: center;
    margin-top: 50px;
    
}
#logo{
    margin-top: 30px;
}

#
ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    text-shadow: 5px 1px 1px white;
    margin: 0;
    padding: 0;
    list-style: none;


}
  
ul#menu li {
    background-image: url('../img/metal.jpg');
    border-radius:10px 10px 0px 0px;
    border-bottom: 5px solid #FFA500;
    border-top: 2px solid #FFA500;
    border-left: 2px solid #FFA500;
    border-right: 2px solid #FFA500;
    display: block;
    width: 130px;
    height: 30px;
    margin: 2px;
    float: left; /* elementi su singola riga */
    transition: all 1800ms linear;
}
  
ul#menu li a {
    color: black;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 150px;
    height: 30px;
    
}
  
ul#menu li:hover {
    background-color: #ADD8E6;
    border-bottom: 5px solid gray;
    transform: rotate(360deg);

}
#menu li.active{
    background-color: violet;

}

hr{
    color: #FFA500;
    background-color: #FFA500;
}



#menulat{
    border-right: 1px solid black;
}

#menulat a{
    color: grey;
}
#menulat li{
    list-style: none;
}
#foto{
    height: 50%;
    width: 70%;
    background-image: url('../img/intro.jpg') ;
    background-repeat:no-repeat;
}