Cambiare immagine in funzione di due bottoni

**TrevizeCz** · 22-09-2015, 11:18

Salve a tutti,
vorrei poter cambiare l'immagine di una pagina in funzione di 2 bottoni.
Mi spiego meglio:
ho creato una griglia di icone, cliccando una sola volta un'icona cambia l'immagine che ho posto in alto alla pagina, ad ogni icona corrisponde un'img diversa, per far ciò ho usato la funzione showImage.

Ho messo nella pagina 5 bottoni.
Vorrei che premendo:
l'icona 1 ed il bottone 1 venga visualizzata l'img 1-1
l'icona 1 ed il bottone 2 venga visualizzata l'img 1-2
....
l'icona 4 ed il bottone 3 venga visualizzata l'img 4-3

codice:

<html><head>    <title>sali</title>
    <style type="text/css">
body{
    margin: 0; padding: 0;
    background-color:#fff;
    color:#000;
    font-family: georgia,serif;
    }


h3{
    margin: 0 0 20px;
    border-bottom: 10px double #666;
    padding: 10px 50px;
    background-color: #333;
    color: #ffc;
    font: normal bold 28px georgia,serif;
    }


ol#gallery{
    margin: 5px auto;
    padding: 0;
    width:1400px;
    }


ol#gallery li{
    float:left;
    background-color: #000;
    color: #fff;
    margin: 0 0 30px;
    padding: 0;
    list-style-type: none
    }


ol#gallery h3{
    margin: 0;
    padding: 3px 0 16px;
    color: #fff;
    font: 12px light arial,sans-serif;
    text-align: center
    }


ol#gallery a{
    display: block;
    padding: 3px 3px 16px;
    }


ol#gallery a:hover{
    color: #fff;
    }


ol#gallery a img{
    border: 2px solid #000
    }


ol#gallery a:hover img{
    border-color: #FFFFA0
    }
div#dimensioni img{
  width: 300px;
  height: 300px;
  }


a#dimensioni img{
  width: 100px;
  height: 100px;
  }


  
div#logo img{
 margin-left: 202px;
 margin-top: 10px
  }


  
</style>
    <script type="text/javascript" language="JavaScript">
        function showImage(filename) {
            document.images[Image_Name].src = filename;
        }
    
        Image_Name = "SHOWPAD";
</script>
    <style type="text/css"></style>
    </head>
<body>
    <div id="logo"><img src="logo.png"></div>
        <ol id="gallery">
            <br><br><br><br><br><br>
            <div id="dimensioni" align="center"><img SRC="http://myttex.net/forum/attachment.php?aid=5561" NAME="SHOWPAD"><br><br>
            <button>stato d'idratazione 1</button><br>
            <button>stato d'idratazione 2</button><br>
            <button>stato d'idratazione 3</button><br>
            <button>stato d'idratazione 4</button><br>
            <button>stato d'idratazione 5</button></div>
            <br><br><br><br><br><br><br><br><br><br>
            <li>
            <h3>esempio</h3>
            <a id="dimensioni" onClick="showImage('http://myttex.net/forum/attachment.php?aid=4609')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Zanzara-in-campo-chiaro-scuro-illuminazione-laterale-e-mista'">
            <img src="http://myttex.net/forum/attachment.php?aid=4609" alt="esempio" title="esempio">
            </a>
            </li>
            <li>
            <h3>esempio2</h3>
            <a id="dimensioni" onClick="showImage('http://myttex.net/forum/attachment.php?aid=4610')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Zanzara-in-campo-chiaro-scuro-illuminazione-laterale-e-mista'">
            <img src="http://myttex.net/forum/attachment.php?aid=4610" alt="esempio" title="esempio">
            </a>
            </li>
            <li>
            <h3>esempio3</h3>
            <a id="dimensioni" onClick="showImage('http://myttex.net/forum/attachment.php?aid=4611')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Zanzara-in-campo-chiaro-scuro-illuminazione-laterale-e-mista'">
            <img src="http://myttex.net/forum/attachment.php?aid=4611" alt="esempio" title="esempio">
            </a>
            </li>
            <li>
            <h3>esempio4</h3>
            <a id="dimensioni" onClick="showImage('http://myttex.net/forum/attachment.php?aid=4612')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Zanzara-in-campo-chiaro-scuro-illuminazione-laterale-e-mista'">
            <img src="http://myttex.net/forum/attachment.php?aid=4612" alt="esempio" title="esempio">
            </a>
            </li>
            <li>
            <h3>esempio5</h3>
            <a id="dimensioni" onClick="showImage('http://myttex.net/forum/attachment.php?aid=4613')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Zanzara-in-campo-chiaro-scuro-illuminazione-laterale-e-mista'">
            <img src="http://myttex.net/forum/attachment.php?aid=4613" alt="esempio" title="esempio">
            </a>
            </li>
        </ol>
    </div>
    <p style="clear: left;margin: 30px">
    </p>
</body></html>

Spero di non essere andato contro il Regolamento del forum non avendo aperto nessun post di presentazione, ma non ho visto una sezione apposita.

Ringrazio anticipatamente chi mi sarà d'aiuto

!

Discussione: Cambiare immagine in funzione di due bottoni

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Cambiare immagine in funzione di due bottoni

Tag per questa discussione

Permessi di invio