Comparsa immagine al passaggio....

**Dudus** · 15-08-2017, 23:42

Salve

Non riesco a venirne a capo di sta cosa senza un aiuto, in pratica ciò che mi serve è che un immagine appaia al passaggio del mouse e sparisca una volta che non è sopra..

in pratica abbiamo una "sezione" con un "immagine" che copre buona parte della sezione, diciamo, in cima alla "sezione" troviamo 4 "pulsanti/bottoni", una volta premuto uno di questi sull'immagine sottostante devono apparire, a seconda di quale si preme, un tot di immagini posizionati in luoghi diversi sull'immagine, ed ognuna di queste fa apparire un immagine diversa al passaggio del mouse.

vi metto qui sotto un illustrazione di come dovrebbe essere più o meno composto il tutto..

ROSSO=sezione
GIALLO=pulsanti/sezione
VERDE=immagine fissa
BLU=immagini che appaiono a seconda del pulsante premuto
GRIGIO=immagine che appare al passaggio del mouse sulle immagini in BLU
l'immagine GRIGIA deve apparire sempre al centro dell'immagine VERDE

A sinistra immagine dopo aver premuto 1 bottone / a destra dopo il passaggio del mouse sul primo cerchio/immagine

Ho provato usando questo codice .css ma non so proprio come arrivare ad avere ciò che è indicato sull'immagine sopra postata. Se qualcuno può fornirmi un minimo di codice di inizio anche diverso da questo per poter poi proseguire da me sarebbe davvero ottimo e mi fareste un grosso favore.

codice HTML:

<!DOCTYPE html>
<html>          
<head>                    
      <meta charset="utf-8">                    
      <title>immagini prova</title>                    
      <link rel="stylesheet" href="stile.css">          
      <style>                    
               .immagine1 {                        
               display: block;}                    
               .immagine2 {                        
               display: none;}                    
               #cambioimmagine {                        
               float: left;}                    
               #cambioimmagine:hover .immagine1 {                        
               display: none;}                    
               #cambioimmagine:hover .immagine2 {                        
               display: block;}   
     </style>          
</head>          
<body>                    
      <div id="cambioimmagine">                    
                <img class="immagine1" src="immagini.png" />                    
                <img class="immagine2" src="immagine.jpg" />                    
      </div>          
</body>
</html>

**Dudus** · 18-08-2017, 16:21

Sono riuscito a risolvere quasi tutto, mi manca solo l'ultima parte che proprio non riesco ad arrivarci :-/

In pratica i <div> devono essere nascosti al caricamento della pagina e devono apparire nell'istante in cui si clicca sull'immagine corrispondente, invece al caricamento escono tutti i <div> assieme uno sotto l'altro...

Allego il tutto qui sotto, per piacere datemi una risposta..

codice HTML:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>PROVA</title>
        <link rel="stylesheet" href="stile.css" type="text/css">    
        <script src="https://code.jquery.com/jquery-1.10.2.js">
        </script>
</head>
<body>            
           <section id="section">         
                   <img id="pulsante" src="pulsante1.jpg" alt="">         
                   <img id="bottone" src="pulsante1.jpg" alt="">             
                                <div id="prova">                                
                                           <img id="toggle1" src="pulsante1.jpg" alt="">                
                                           <img id="toggle" src="pulsante1.jpg" alt="">                         
                                </div>                 
                                <div id="prova1">                
                                           <img id="toggle2" src="pulsante1.jpg" alt="">                
                                           <img id="toggle3" src="pulsante1.jpg" alt="">             
                                </div>

                    <img id="test1" src="Cattura3.jpg" alt="">        
                    <img id="test" src="Cattura1.jpg" alt="">
     
           </section>   
</body>

<script type="text/javascript">
    $ (function() {        
             $ ('#pulsante' ) .click (function() {            
             $ ('#prova') .toggle (500);        });   
     });    
    $ (function() {       
             $ ('#toggle' ) .hover (function() { 
             $ ('#test') .toggle (500);        });    
     });    
    $ (function() {        
              $ ('#toggle1' ) .hover (function() {
              $ ('#test1') .toggle (500);        });
     });

    $ (function() {        
               $ ('#bottone' ) .click (function() {
               $ ('#prova1') .toggle (500);        });
    });
    $ (function() {
                $ ('#toggle2' ) .hover (function() {
                $ ('#test') .toggle (500);        });
    });    
    $ (function() {        
                $ ('#toggle3' ) .hover (function() {
                $ ('#test1') .toggle (500);        });
    });

</script>
</html>

Discussione: Comparsa immagine al passaggio....

Strumenti discussione

Ricerca discussione

Visualizza

Comparsa immagine al passaggio....

Permessi di invio