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

!

**cavicchiandrea** · 22-09-2015, 17:15

Ciao e benvenuto.
Come prima regola ricordati che gli id devono essere univoci (in questo caso devi avere un solo id="dimensioni" nella pagina).
Dovendo "sposare" l'icona con pulsante dovrai valorizzare il valore dell'icona in campo nascosto (hidden) e recuperare questo valore alla pressione del del tasto (button) associandogli il valore del tasto premuto.
Con il codice postato non è possibile fare esempi, oltretutto se l'operazione sarà dinamica potrebbe cambiare di volta in volta e non statica cioè icone e tasti predefiniti dove ci possono essere solo x sequenze il tutto sarà molto più complesso.
Saluti.

**TrevizeCz** · 23-09-2015, 09:55

Grazie per la dritta

Purtroppo non mastico molto la programmazione, però mi è bastato per risolvere il problema

Queste sono le 2 funzioni che ho aggiunto:

codice:

<script type="text/javascript" language="JavaScript">            function Acqua(U, D, K, O) {
                document.modulo.acqua.value = D;
            }
    </script>

codice:

<script type="text/javascript" language="JavaScript">            function Conferma()
            {
                  var acqua = document.modulo.acqua.value;
                  if (acqua == "D")
                  {
                    showImage("http://myttex.net/forum/uploads/avatars/avatar_2588.jpg")
                  }
                    if (acqua == "U")
                  {
                    showImage("http://myttex.net/forum/uploads/avatars/avatar_2954.png")
                  }
                  if (acqua == "K")
                  {
                    showImage("http://myttex.net/forum/uploads/avatars/avatar_10.gif")
                  }
                  if (acqua == "O")
                  {
                    showImage("http://myttex.net/forum/uploads/avatars/avatar_509.jpg?dateline=1339442692")
                  }
                  else (acqua == "")
                  {
                  document.modulo.acqua.value =null
                  }
              }
      
    </script>

e queste le modifiche che ho apportato alle icone e al bottone:

codice:

<form name="modulo">
        <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>
        <input type="button" value="Stato d'idratazione 1" onclick="Conferma()"><br>
        </div>
<input type="hidden" name="acqua">
        <p>
            <li>
            <h3>esempio</h3>
                <a id="dimensioni2" onClick="showImage('http://i59.tinypic.com/21kf98h.jpg')"  ondblclick="document.location.href='http://myttex.net/forum/Thread-Dicloro-iso-cianurati-metallici'">
                <img src="http://i59.tinypic.com/21kf98h.jpg"  onclick="Acqua('U','D', 'O', 'K')" align="absmiddle">
                </a>
            <li>
                <h3>esempio2</h3>
                <a id="dimensioni2" onClick="showImage('http://myttex.net/forum/attachment.php?thumbnail=1656')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Acido-Borico-Sintesi'">
                <img src="http://myttex.net/forum/attachment.php?thumbnail=1656" onclick="Acqua('D','U','K','O')" align="absmiddle">
                </a>
            </li>
            <li>
                <h3>esempio3</h3>
                <a id="dimensioni2" onClick="showImage('http://myttex.net/forum/attachment.php?thumbnail=6264')" ondblclick="document.location.href='http://myttex.net/forum/Thread-Potassio-esatiocianocromato-III-tetraidrato'">
                <img src="http://myttex.net/forum/attachment.php?thumbnail=6264" onclick="Acqua('O','K','U','D')" align="absmiddle">
                </a>
            </li>
<li>
                <h3>solfato</h3>
                <a id="dimensioni2" onClick="showImage('http://www.horti.it/images/p018_1_00.jpg')"  ondblclick="document.location.href='http://myttex.net/forum/Thread-Dicloro-iso-cianurati-metallici'">
                <img src="http://www.horti.it/images/p018_1_00.jpg"  onclick="Acqua('K','O','D','U')" align="absmiddle">
                </a>
            </li>

Se voleste vederlo "all'opera" ecco il link:http://myttex-forum.tumblr.com/
Solo le prime 3 icone e l'icona solfato interagiscono con il bottone.
ps. devo ancora finirlo.

Discussione: Cambiare immagine in funzione di due bottoni

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare immagine in funzione di due bottoni

Tag per questa discussione

Permessi di invio