Scorrere immagini

[damy11]

Ciao a tutti.

http://bloodfight.altervista.org/

Come vedete nel sito che sto creando c'è lo spazio dove scegliere l'avatar...io ho 10 immagini(5 maschi e 5 femmine) che si chiamano 1/2/3/ecc.jpg

Dovrei fare in modo che in base all'opzione scelta nel "Sesso" cambi avatar:

Maschio= 1.jpg
Femmina= 6.jpg

Inoltre i pulsanti affianco devono cambiare l'immagine andando avanti o indietro...potete spiegarmi come fare??

[SoulStorm892]

ok.
Con JAVASCRIPT è semplice.

Io farei in questa maniera:

salverei le 10 immagini con i seguenti nomi:

avatar1F.png
avatar2F.png
...
avatar5F.png
avatar1M.png
...
avatar2M.png

ovvero che le ultime due lettere prima del formato indichino il numero dell'immagine ed il sesso.
Setterei due variabili globali _gender e _pickedImg a memorizzare rispettivamente sesso e numero immagine.

A questo punto crei la funzione showAvatarImage() che tramite una funzione format da te creata faccia sostanzialmente questo:

document.getElementById("avatar").src=format("avatar{0}{1}.png",_pickedImg,_gender);

ovvero "ridisegni" l'immagine pescando quella con i valori delle variabili corrispondente.

Detto questo il gioco è fatto. Con due pulsanti (< e >) incrementi o decrementi tramite javascript la variabile _pickedImg e con showAvatarImage() la ricarichi. Stessa cosa per la combo box che al suo cambiare JAVASCRIPT catturera il suo valore (F o M) e ridisegnerà l'immagine (sempre con showAvatarImage).

Questa è a grandi linee l'idea. Potrei provare a buttarti giù anche un po' di codice ma devi darmi del tempo per capire quello che hai già fatto . Se vuoi basta chiedere

[damy11]

Ciao,grazie per la spiegazione sei stato gentilissimo e chiarissimo!
Ho chiamato le immagini:

m1.png e f1.png con i numeri a salire per entrambe le lettere.

Questo è il form:

<form method="post" action="registrazione.php">
<table width="300px">
<tr><td width="50%">Nickname:</td><td width="50%"><input type="text" name="nick" id="nick"/></td></tr>
<tr><td width="50%">Password:</td><td width="50%"><input type="password" name="pass" id="pass" /></td></tr>
<tr><td width="50%">Email:</td><td width="50%"><input type="text" name="mail" id="mail" /></td></tr>
<tr><td width="50%">Sesso:</td>
<td width="50%"><select name="sesso"><option value="Maschio">Maschio</optio><option value="Femmina">Femmina</option></select></td></tr>
<tr><td colspan="2">Scegli il tuo avatar:</td></tr>
<tr><td><button name="indietro"><<</button></td><td>[img]immagini/avatar/1.png[/img]</img></td><td><button name="avanti">>></button></td></tr>
<tr><td width="50%">Server:</td>
<td width="50%"><select name="server"><option value="1">Server 1</option></select></td></tr>
<tr><td><input class="bottone" type="submit" name="registrati" value="Registrati" /></td></tr>
</table>
</form> 

Io scusa,ma so fare davvero poco con Javascript...se potresti scrivere un pò di codice,non importa in quanto tempo giusto per vedere un pò...
Grazie mille

[SoulStorm892]

ok...
te lo faccio da zero il codice JS

dunque prima di tutto inserisci nel tag HEAD questa stringa che chiama il foglio js:

<script type="text/javascript" src="main.js" ></script>

Quindi crea il file main.js ed all'interno inserisci questo:

var _pickedImg = 1;
var _gender = 'M';

function selectAvatarGender(gender)
{
  _gender = gender;
  showAvatarImage();
}

//seleziona immagine (valori: dir=1 successiva, dir=-1, precedente);
function scrollAvatarImage( dir )
{
  _pickedImg += dir;
  if(_pickedImg > 5) _pickedImg = 1;
  if(_pickedImg < 1) _pickedImg = 5;
  showAvatarImage();
}

//ridisegna avatar
function showAvatarImage()
{
   document.getElementById("avatar").src=format("avatar{0}{1}.png",_pickedImg,_gender);
}

//Restituisce una stringa formattata
function format( str ) //par1, par2, ... parN 
{
    if ( arguments.length <= 1 ) return str; //se non ci sono parametri restituisce la stringa
    
    for( var token = 0; token <= (arguments.length - 2); token++ )
        str = str.replace( new RegExp( "\\{" + token + "\\}", "gi" ),arguments[ token + 1 ] );    //sostiuisce i token con i parametri

    return str;

}

In questo file ci sono tutte le funzioni per cambiare le immagini, ora bisogna solo impostare gli eventi che attivino tali funzioni e questo lo facciamo a livello di html:
bottone indietro:

<button name="indietro" onclick="scrollAvatarImage(-1);"> 

bottone avanti:

<button name="avanti" onclick="scrollAvatarImage(1);"> 

immagine avatar:

[img]immagini/avatar1M.png[/img] 

molto importante impostare l'id 'avatar' al tag img poichè funge da riferimento per le funzioni JS (indica il 'punto' dove queste dovranno lavorare)

ed infine la combo box per il sesso:

<select name="sesso" onchange="selectAvatarGender(this[this.selectedIndex].value);">
  <option value="M">Maschio</option>
  <option value="F">Femmina</option>
</select> 

Ho battuto giù il codice a mano senza ricontrollarlo quindi se qualcosa non funziona avvertimi .
Ho evitato anche commenti e quant'altro poiché ti ho spiegato nel post precedente l'idea, se volessi un qualsiasi chiarimento sono disponibile

[damy11]

Grazie mille non so davvero come ringraziarti,appena posso collegarmi dal pc lo provo!

Non ho capito una cosa però dello script:

 document.getElementById("avatar").src=format("avatar{0}{1}.png",_pickedImg,_gender); 

Cosa sono {0} e {1} nel nome dell'immagine?

[SoulStorm892]

Molto semplice. {0} e {1} sono dei segnalibri.

Scrivere:

var nome = "Alessio";
var eta = "21";
var msg = "il mio nome è "+nome+" ed ho "+eta+" anni."; 

è equivalente a scrivere:

var nome = "Alessio";
var eta = "21";
var msg = format("il mio nome è {0} ed ho {1} anni.", nome, eta); 

o

var msg = format("il mio nome è {0} ed ho {1} anni.", "Alessio", "Età"); 

In tutti i tre casi la stringa msg andrà a contenere: "il mio nome è Alessio ed ho 21 anni.", la funzione format permette di sostituire al segnalibro ({0},{1}..{i}..{n}) l'argomento corrispondente. {0} sta per nome e {1} sta per anni.

[damy11]

Grazie ancora sei stato molto chiaro!

Ho un problema con il tuo script...ho modificato quella riga appunto poichè le immagini si trovano nella cartella "avatar" contenuta nella sua cartella "immagini"

document.getElementById("avatar").src=format("imma gini/avatar/{0}{1}.png",_gender,_pickedImg);

Praticamente non mi fa vedere l'immagine

[SoulStorm892]

Se la stringa è impostata in questo modo:

document.getElementById("avatar").src=format("immagini/avatar/{0}{1}.png",_gender,_pickedImg); 

e genera alla prima immagine degli avatar maschili tale indirizzo:
immagini/avatar/M1.png
o per esempio alla terza immagine degli avatar femminili l'indirizzo:
immagini/avatar/F3.png

Se le immagini le avevi impostate come 1M,2M...3F ecc... la stringa di cui hai bisogno è la seguente:

document.getElementById("avatar").src=format("immagini/avatar/{0}{1}.png",_pickedImg,_gender); 

[damy11]

Ciao.
Ti posto le pagine che ho adesso.

main.js

var _gender = 'm';
var _pickedImg = 1;

function selectAvatarGender(gender)
{
_gender = gender;
showAvatarImage();
}

//seleziona immagine (valori: dir=1 successiva, dir=-1, precedente);
function scrollAvatarImage( dir )
{
_pickedImg += dir;
if(_pickedImg > 5) _pickedImg = 1;
if(_pickedImg < 1) _pickedImg = 5;
showAvatarImage();
}

//ridisegna avatar
function showAvatarImage()
{
document.getElementById("avatar").src=format("immagini/avatar/{0}{1}.png", _gender, _pickedImg);
}

//restituisce una stringa formattata
function format( str ) //par1, par2, ... parN 
{
if ( arguments.length <= 1 ) return str; //se non ci sono parametri restituisce la stringa

for( var token = 0; token <= (arguments.length - 2); token++ )
str = str.replace( new RegExp( "\\{" + token + "\\}", "gi" ),arguments[ token + 1 ] ); //sostiuisce i token con i parametri

return str;
} 

index.php

<table>
<tr><td width="50%">Sesso:</td>
<td width="50%"><select name="sesso" onchange="selectAvatarGender(this[this.selectedIndex].value);"> 
  <option value="m">Maschio</option> 
  <option value="f">Femmina</option> 
</select></td></tr>
<tr><td colspan="2">Scegli il tuo avatar:</td></tr>
<tr><td><button name="indietro" a href="#" onclick="scrollAvatarImage(-1);"><<</button></td><td>[img]immagini/m1.png[/img]</td><td><button name="avanti" a href="#" onclick="scrollAvatarImage(1);">>></button></td></tr>
</table> 

Le immagini si trovano in "avatar" che è contenuta in "immagini" e si chiamano m1.png,m2.png,f1.png,ecc..

Grazie ancora per la pazienza

[SoulStorm892]

L'ho provato.. ti da un errorino sulla RegEx nella funzione format:

tr = str.replace( new RegExp( "\\{" + token + "\\}", "gi" ),arguments[ token + 1 ] ); 

\ va sostituito con \\ , disattenzione mia .

Se non va ancora cancella la funzione format e semplicemente componi l'indirizzo 'a mano' nella funzione showAvatarImage:

document.getElementById("avatar").src= "immagini/avatar/" _gender + _pickedImg + ".png"; 

E con questo dovrebbe essere tutto ok