[JAVASCRIPT] - Problema scambio immagini [mod]

09-01-2006, 00.29.00

Allora, io ho preso questo pezzetto di testo in javascript da modificare ma ho vari problemi:

<SCRIPT LANGUAGE="JavaScript"><!--
var abilitato=0;
var strin="";
function test(){

//Fino a qui capisco. Analizza se il browser e' compatibile con Javascript.

browserName=navigator.appName.charAt(0);
browserVer=parseInt(navigator.appVersion);
if (browserName=="M" && browserVer >= 3) abilitato=1;
if (browserName=="N" && browserVer >= 3) abilitato=2;
if (browserName=="N" && browserVer >= 4) abilitato=3;
if (browserName=="M" && browserVer >= 4) abilitato=4;
}
function keyDown(e) {
if (abilitato==3) {

//Anche qui, tutto a posto perché questo IF non mi serve.

var nKey=e.which; var ieKey=0;
var realkey = String.fromCharCode(e.which);
strin="Codice tasto in Netscape: "+nKey+". Premuto tasto "+realkey
}
if (abilitato==4) {

//Qui c'è il problema.

Io vorrei che la variabile iekey (cioè il codice del tasto premuto sulla tastiera) o la variabile realkey (cioè la lettera del tasto premuto sulla tastiera) facessero in modo che, ad un particolare tasto premuto, attivassero una particolare funzione.

var ieKey=event.keyCode; var nKey=0;
var realkey = String.fromCharCode(event.keyCode);
strin="Codice tasto in Explorer: " + ieKey+". Premuto tasto "+realkey
}
alert(strin)
}
document.onkeydown = keyDown
//--></SCRIPT>

Ringrazio chiunque abbia il buon cuore di aiutarmi.

**heracleum** · 09-01-2006, 00.39.37

Boh, non ho capito molto bene..
cmq facendo finta che ho capito risponderei così

:

dopo:
alert(strin)

Aggiungerei semplicemente:

if (realkey=='a'){
premutoTastoA();
}

dove la function premutoTastoA() dovrebbe corrispondere alla tua "attivassero una particolare funzione"

Altrimenti aggiungi dettagli...

22-01-2006, 18.24.00

Pensavo di poter riuscire a costruirmi da solo la funzione ma non so come fare quindi devo chiedere di nuovo se qualcuno può aiutarmi.
Vi spiego fancendovi un esempio:

Ho due immagini

e

e un unico bottone sullo schermo.
Premendo il tasto A sulla tastiera, il programma deve fare in modo che premendo il bottone si sostituisca l'immagine

con l'immagine

.
Nel caso, invece, che il tasto premuto sulla tastiera sia il B, il programma deve fare in modo che, premuto sempre lo stesso bottone, l'immagine

diventi

.

Un inizio di programma sarebbe così ma non so come continuare:

<html>
<head>
<title></title>
<script language="javascript">
function passauno() {
document.images[1].src="http://angelworld.altervista.org/Pagine/Lettere/rLettera_A.png"
}
function passadue() {
document.images[1].src="http://angelworld.altervista.org/Pagine/Lettere/rLettera_B.png"
}
</script>
</head>
<body>
<IMG src="http://angelworld.altervista.org/Pagine/Lettere/rLettera_A.png" STYLE="position: absolute; Top:10; Left:5;">
<IMG src="http://angelworld.altervista.org/Pagine/Lettere/Lettera_A.png" STYLE="position: absolute; Top:10; Left:5;">
<IMG src="http://angelworld.altervista.org/Pagine/Lettere/rLettera_B.png" STYLE="position: absolute; Top:10; Left:50;">
<IMG src="http://angelworld.altervista.org/Pagine/Lettere/Lettera_B.png" STYLE="position: absolute; Top:10; Left:50;">
<INPUT TYPE="button" VALUE="Ok" onClick="passauno()" STYLE="position: absolute; Top:40; Left:10;z-index:3">
</body>
</html>

22-01-2006, 21.02.11

guarda qua http://forum.altervista.org/showthre...light=tastiera
cosi scopri se hanno premuto a o b il codice della a è 97 della b 98 poi ci sono anche quelli x il maiuscolo

ciao ^__^

22-01-2006, 21.30.02

Grazie per l'informazione ma la domanda era un'altra.
Volevo sapere come fare uno script che cambia la funzione di un bottone premendo un tasto sulla tastiera.

**heracleum** · 23-01-2006, 02.11.12

Ecco il codice completo, prova a leggerlo, se qualcosa non la capisci chiedi pure:

Codice HTML:

<html>
<head>
<title></title>
<script type="text/javascript">
var abilitato=0;
var lett_path = 'http://angelworld.altervista.org/Pagine/Lettere/';
var lett_name = 'Lettera_';
var lett_ext = '.png';
var lett_active = 'r';
var lett_gestite = new Array('A','B'); //lettere previste
var lett_indimages =  new Array( 0 , 1 ); //indice nell'array document.images
var lett_stati =   new Array( false , false); //stati di attivazione

function premuto(realKey) {
	var ind = indiceInArrayDiElem(lett_gestite, realKey);
	if (ind ==-1)
		return false;
	if (document.images[lett_indimages[ind]]){
		lett_stati[ind] = !lett_stati[ind]; //inverti stato
		cambiaImg(ind, realKey);
	}
}

function cambiaImg(ind, realKey) {
	document.images[lett_indimages[ind]].src = 
		lett_path + ((lett_stati[ind])?lett_active:'') + lett_name + realKey + lett_ext;
}


function indiceInArrayDiElem(arr, elem){
	var i=-1;
	while(++i<arr.length){
		if (arr[i]==elem)
			return i;
	}
	return -1; //non trovato
}

function initImg(){
	for (var i=0; i<lett_gestite.length; i++)
		cambiaImg(i, lett_gestite[i]);
}

function test(){
	browserName=navigator.appName.charAt(0);
	browserVer=parseInt(navigator.appVersion);
	if (browserName=="M" && browserVer >= 3) abilitato=1;
	if (browserName=="N" && browserVer >= 3) abilitato=2;
	if (browserName=="N" && browserVer >= 4) abilitato=3;
	if (browserName=="M" && browserVer >= 4) abilitato=4;
}
function keyDown(e) {
	var realkey = '';
	if (abilitato==3) {
		realkey = String.fromCharCode(e.which);
	}
	if (abilitato==4) {	
		realkey = String.fromCharCode(event.keyCode);
	}
	premuto(realkey);
}
document.onkeydown = keyDown
test(); //avvia il test browser
</script>

</head>
<body>
<img src="" STYLE="position: absolute; top:10px; left:5px;" alt="A"/>
<img src="" STYLE="position: absolute; top:10px; left:50px;" alt="B"/>

<script type="text/javascript">
	initImg(); //aggiorna stato iniziale
</script>

</body>
</html>

28-01-2006, 01.06.53

La funzione (questa sopra di heracleum che ringrazio) ha un javascript un po' troppo avanzato e non riesco a modificarlo come vorrei.
Qualcuno saprebbe modificarla aggiungendo le lettere dalla A alla Z (La directory è http://angelworld.altervista.org/Pagine/Lettere/) e con i colori rosso, blu, verde e giallo invece che solo rosso e verde((il colore della lettera: 'r'=rosso 'g'=giallo 'b'=blu ''=verde)Lettera_(la lettera).png).
Caricata la pagina dovrebbero apparire prima le lettere blu poi premendo il tasto una volta verde, due volte giallo, tre volte rosso e premendo più volte si deve ripetere la sequenza dei colori (blu, verde, giallo, rosso). Le immagini sono già caricate su internet.

bLettera_A.png - Lettera_A.png - gLettera_A.png - rLettera_A.png
bLettera_B.png - Lettera_B.png - gLettera_B.png - rLettera_B.png
bLettera_C.png - Lettera_C.png - gLettera_C.png - rLettera_C.png
bLettera_D.png - Lettera_D.png - gLettera_D.png - rLettera_D.png
bLettera_E.png - Lettera_E.png - gLettera_E.png - rLettera_E.png
ecc...

**heracleum** · 28-01-2006, 04.17.11

il codice in quanto "troppo avanzato"

era per fortuna flessibile quindi è bastato solo adattarsi ai QUATTRO stati (blu, verde, giallo, rosso) invece dei due previsti inizialmente (verde - rosso), ecco il codice aggiornato:

Codice HTML:

<html>
<head>
<title></title>
<script type="text/javascript">
var abilitato=0;
var lett_path = 'http://angelworld.altervista.org/Pagine/Lettere/';
var lett_name = 'Lettera_';
var lett_ext = '.png';

//INIZIO unica parte da modificare:
var lett_gestite =   new Array('A','B','C','D','E'); //lettere previste
var lett_indimages = new Array( 0 , 1 , 2 , 3 , 4 ); //indice nell'array document.images
var lett_stati =     new Array( 0 , 0 , 0 , 0 , 0 ); //stati di attivazione (0=blu, 1=verde, 2=giallo, 3=rosso)
//FINE unica parte da modificare

var lett_coloristati = new Array('b','','g','r'); //prefisso di colore, l'indice equivale al numero di stato

//e' stato premuto un certo tasto, se e' una delle lettere gestite cambia la relativa immagine
function premuto(realKey) {
	var ind = indiceInArrayDiElem(lett_gestite, realKey);
	if (ind ==-1)
		return false;
	if (document.images[lett_indimages[ind]]){
		lett_stati[ind] = (lett_stati[ind]+1) % lett_coloristati.length; //inverti stato
		cambiaImg(ind, realKey);
	}
}

//imposta il percorso del file immagine
function cambiaImg(ind, realKey) {
	document.images[lett_indimages[ind]].src = 
		lett_path + lett_coloristati[lett_stati[ind]] + lett_name + realKey + lett_ext;
}

//utilita' per sapere l'indice di un elemento in un array
function indiceInArrayDiElem(arr, elem){
	var i=-1;
	while(++i<arr.length){
		if (arr[i]==elem)
			return i;
	}
	return -1; //non trovato
}

//imposta l'immagine iniziale in base al suo stato iniziale
function initImg(){
	for (var i=0; i<lett_gestite.length; i++)
		cambiaImg(i, lett_gestite[i]);
}

function test(){
	browserName=navigator.appName.charAt(0);
	browserVer=parseInt(navigator.appVersion);
	if (browserName=="M" && browserVer >= 3) abilitato=1;
	if (browserName=="N" && browserVer >= 3) abilitato=2;
	if (browserName=="N" && browserVer >= 4) abilitato=3;
	if (browserName=="M" && browserVer >= 4) abilitato=4;
}
function keyDown(e) {
	var realkey = '';
	if (abilitato==3) {
		realkey = String.fromCharCode(e.which);
	}
	if (abilitato==4) {	
		realkey = String.fromCharCode(event.keyCode);
	}
	premuto(realkey);
}
document.onkeydown = keyDown
test(); //avvia il test browser
</script>

</head>
<body>
<img src="" STYLE="position: absolute; top:10px; left:5px;" alt="A"/>
<img src="" STYLE="position: absolute; top:10px; left:55px;" alt="B"/>
<img src="" STYLE="position: absolute; top:10px; left:105px;" alt="C"/>
<img src="" STYLE="position: absolute; top:10px; left:155px;" alt="D"/>
<img src="" STYLE="position: absolute; top:10px; left:205px;" alt="E"/>

<script type="text/javascript">
	initImg(); //aggiorna stato iniziale
</script>

</body>
</html>

L'unica cosa che devi cambiare è il numero di lettere "gestite", cioè:
var lett_gestite = new Array('A','B','C','D','E'); //lettere previste
come vedi mi sono fermato solo alla lettera E, puoi continuare indicando l'alfabeto che vuoi (per es. non so se vuoi le lettere dell'alfabeto inglese J,K,W,...) decidi tu quali.
Per ciascuna lettera che aggiungi nell'Array "lett_gestite" devi aggiungere un elemento negli altri due array correlati
lett_indimages e lett_stati
- in lett_indimages devi semplicemente scrivere l'indice (0, 1, 2...) che le immagini hanno rispetto alla pagina, per farti capire, se all'inizio della stessa pagina hai una immagine per il titolo questa è considerata l'immagine indice 0 ( document.images[0] ) quindi in questo caso lett_indimages avrebbe i numeri (1, 2, 3, ...) invece che (0, 1, 2...)
- in lett_stati devi indicare per ciascuna lettera gestita qual è il suo stato iniziale, ad esempio: se le lettere gestite sono ('A','B','C') e per assurdo devono partire dallo stato GIALLO in lett_stati indicherai (2, 2, 2). Altro esempio se le lett_gestite ('A','B','C','D','E') devono partire con la A e B VERDI e tutte le altre BLU allora in lett_stati indicherai (1, 0, 0, 0, 0).

E ovviamente nel html body dovrai inserire le immagini delle altre lettere aggiunte.

Forse quel che ti sembra "avanzato" e magari poco chiaro è l'uso degli Array? Mi sembra decisamente un 'esercizio' in cui gli array risolvono alla grande le esigenze con il minimo codice ripetuto. Infatti come vedrai la path BASE alle tue immagini compare una volta sola, mentre solo per le lettere A e B del tuo primo abbozzo, per due sole lettere comparivano SEI path immagine, e puoi immaginare che bordello se invece di A e B, dovevi arrivare fino alla Z

Fai così, tu prova a modificare quel poco che devi toccare (il resto del codice si adegua da sè agli array di "configurazione") quindi aumenta elementi nei tre array lett_gestite, lett_indimages e lett_stati (tutti devono avere lo stesso numero di elementi, sono correlati) e in fondo i tag IMG.
Provi, se non funge fammi sapere che ti spiego o correggo il tuo codice.
Ciao

Discussione: [JAVASCRIPT] - Problema scambio immagini [mod]

LinkBack

Strumenti discussione

Display

[JAVASCRIPT] - Problema scambio immagini [mod]

Regole di scrittura