[info]java, conteggio caratteri

salve,
sto lavorando ad una photogallery, e volevo visualizzare delle immagini con effetti rollover partendo da alcune miniature.
lo script che ho creato è un misto tra javascript, html e css, ed è perfettamente funzionante, solo che ha un problema: è troppo complesso.
Inoltre ha un problema: devo inserire manualmente nel codice html l'url dell'immagine grande (per la miniatura non ho problemi, lavoro con dreamweaver e faccio subito), infatti l'immagine "grande" viene creata assegnandogli il background con uno script.

Purtoppo perderei un sacco di tempo a inserire manualmente i link nel codice, ed inoltre se dovessi aver bisogno di cambiare il nome o la locazione dell'immagine dovrei cercare e sostituire manualmente il tutto (per la miniatura non ho problemi, sempre grazie a Dreamwaver ).

Una soluzione ci sarebbe:
creare uno script che associ al file immagine la miniatura.
Premesso che tutte le miniature sono fatte così:
nomeimmagine_small.estensione

mi servirebbe uno script che mi prenda il nome dell'immagine, ne calcoli la lunghezza, e tolga dal quint'ultimo al 10 carattere partendo dalla fine, ovvero che tolga "_small" al file. A questo punto posso assegnare al background dell'immagine il nome ricavato.

Il mio problema è che non conosco bene il java e non conosco le istruzioni per creare questo script. Se i nomi fossero stati tutti di una stessa lunghezza forse ci sarei riuscito.
Cmq spero che qualcuno mi possa consigliare qualcosa o una qualche guida specifica su questo argomento.

Adesso torno a lavorarci su, e cerchero' di postare una bozza dello script.
Concettualmente in mente so come farlo ma in java/javascript non conosco le istruzioni :(

grazie

gl

allora innazi tutto java e javascirpt sn due cose diversissime...cmq guarda qt funzione:

Codice:

---

function ntr(str){
var newstr="";
i = str.lastIndexOf(".");
x=i-7;
for(k=0; k<=x; k++){
newstr+=str.charAt(k);
}
for(y=i, b=str.length; y<=b; y++){
newstr+=str.charAt(y);
}
return newstr;
}

---

lo so che sono 2 cose diverse, intendevo dire che non so usare ne una ne l'altra...e che se avete script da propormi vanno bene sia in java che javascript.

Codice:

---

function ntr(str){
var newstr="";
i = str.lastIndexOf(".");
x=i-7;
for(k=0; k<=x; k++){
newstr+=str.charAt(k);
}
for(y=i, b=str.length; y<=b; y++){
newstr+=str.charAt(y);
}
return newstr;
}

---

più o meno ho capito, ma mi mancano alcuni punti:
lastIndexOf("."); non conosco cosa faccia...
i due cicli for da quanto ho capito servono per scrivere le stringhe di codice, nel primo caso scrive le prime (i-7) lettere della variabile , e nel secondo caso le scrive tutte. giusto ?
return cosa fa ?
quindi io dovrei farne uno più o meno così:

Codice:

---

function ntr(str){
var newstr="";
i = str.lastIndexOf(".");
x=i-10;
for(k=1; k<=x; k++){
newstr+=str.charAt(k);
}
y=i-3
for(y=i, b=str.length; y<=b; y++){
newstr+=str.charAt(y);
}
return newstr;
}

---

poi volevo sapere, per prendere la lunghezza di un attributo di un tag,
devo prima passarlo per una variabile ? ho provato a farlo direttamente ma mi restiruisce undefined

nel mio caso è:

mi interessa sapere quanto è lungo l'id di un determinato tag (dopo devo modificarlo con l'attributo src del tag img)

Codice:

---

var=lfi  (stà per lunghezza file immagine)

function lunghezza(obj)
{
lfi=obj.id.lenght ;
}

---

oppure per poterlo fare devo prima fare:

Codice:

---

var=lunghezzaid =obj.id
lfi=lunghezzaid.lenght

---

?

la funziona nn la modificare....funzioan xfettamente così...cmq
lastIndexOf trova la posizione dell'ultimo punto presente nella stringa passata (in pèratica quello che separa l'estensione dal nome) il primo for copia tutta la stringa tranne _small.ext il secondo copia solo .ext così passando la strnga ciao_small.ext otterrai ciao.ext indipendentemente dalla lunghezza dell'estensione....

[edit] nn fare post consecutivi...cmq puoi fare tranquillamente
var lunghezzaid = obj.id.length;


ma tu obj come lo definisci?

ok, grazie

il return cosa fa ?


per esempio volevo calcolare la lunghezza dell'id di un bottone

<input name="ciao_small.txt" onclick=lunghezza(this) value"premi qui" type="button">

Citazione:

---

Originalmente inviato da orion42

il return cosa fa ?

---

Assegnando ad una variabile la funzione, darà come valore a questa variabile il valore della variabile dopo il return.

il return in una funzione serve a restituire un valore...se provi a scrivere
document.write(ntr('ciao_small.jpg'));
ti verrà scritto ciao.jpg, se provi a togliere il return viene stampato undefined.
(potresti tranquillamente farne a meno e stampare la var newstr..ma così è + pratico...)

Scusate se mi intrometto ma la prima funzione per estrarre lo "_small" dal nome file si può risolvere in molte molte meno righe, 2 righe di preciso:

Codice:

---

function ntr(str){
 var i = str.lastIndexOf(".");
 return str.substr(0, i-6) + str.substr(i);
}

---

return ritorna il risultato della funzione, quindi dove in un punto viene invocata la funzione, in quel punto si userà il risultato della funzione, in questo caso la stringa passata senza lo _small.

grazie a tutti per l'interessamento, ma purtoppo ho alcuni problemi di base perchè non conosco bene le istruzioni..

Codice:

---

function ntr(str){

---

il (str) è un comando apposito per dire che la variabile contiene una stringa di caratteri ?

str è il nome della variabile che avrà come valore il valore che gli manderai quando richiami la funzione. Poteva chiamarsi in qualunque modo.

visto che poi dovrei adattare il tutto allo scipt che mi serve, faccio prima a postarvi direttamente il codice sorgente della pagina.

adesso la sto' ripulendo da tutto ciò che non mi serve, fra pochi minuti la posto...

[edit]

ecco il codice sorgente della pagina che sto' tentando di creare:

visibile anche all'url : http://www.orion42.altervista.org/java3.htm

Codice HTML:

---


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<script language="Javascript">
var pack;                //global variable for marking current image position
var flag;                //global variable for setting slideshow status
pack = 0;
flag = 0;

function changeLayerImage(obj)        {
//creates the rollover effect for the layer menu when slideshow is off
        if (flag==0)        {
                obj.style.borderColor='#FF3333';
                obj.style.filter='Alpha(Opacity=100)';
                obj.style.zIndex=obj.style.zIndex+7;
                pack=obj.id.charAt(4);
                upDate(obj);
        } 
}


function deSelect(obj)        {
//resets menu layers to default style when slideshow is off
        if (flag==0)        {
                obj.style.borderColor='#FFCC33';
                obj.style.filter='Alpha(Opacity=70)';
                obj.style.zIndex=obj.style.zIndex-7;
        }
}



function upDate(obj)        {
//performs switch of image backgrounds into viewer and updates display
document.all.Layer2.style.backgroundImage="url("+obj.bglayerimage+")";
document.all.Layer2href.href=obj.bglayerimage;
document.all.Layer2.title=obj.title;

}
</script>
</head>

<body>
 <img id="menu4" title="Orionis Nebula - Nebulosa Fiamma" onMouseOver="changeLayerImage(this)" onMouseOut="deSelect(this)"
 style=" z-index:1; border: 1px solid #FFCC33; filter: Alpha(Opacity=70); cursor: hand;"
 bglayerimage="images/foto/orione/testa-cavallo.jpg" src="images/foto/orione/testa-cavallo_small.jpg" width="123" height="98">
<br>
<br>               
 <a id="Layer2href" target="_blank">       
  <div id="Layer2" title="Viewer" style="width:530px;  height: 430px; z-index:2;
  background-image: url(images/foto/orione/IGC434-NGC202.jpg);
  background-repeat:no-repeat; background-position:center; 
  border:2px solid #4040FF; margin-top:4px">
  </div>
 </a>
</body>
</html>

---

quello che lo script esegue è semplicemente prendere dalla miniatura

Codice:

---

bglayerimage="images/foto/orione/testa-cavallo.jpg"

---

e poi scriverlo tramite

Codice:

---

document.all.Layer2.style.backgroundImage="url("+obj.bglayerimage+")";

---

nel background dell'immagine grande.

io invece dovrei prendere

Codice HTML:

---

src="images/foto/orione/testa-cavallo_small.jpg"

---

toglierci _small e poi mandarlo come sfondo dell'immagine grande

da quanto ho capito dovrei fare così:

Codice:

---

function upDate(obj)        {
//performs switch of image backgrounds into viewer and updates display

var i = obj.src.lastIndexOf(".");
 return obj.src.substr(0, i-6) + obj.src.substr(i);

document.all.Layer2.style.backgroundImage="url("+i+")";
//document.all.Layer2.style.backgroundImage="url("+obj.bglayerimage+")";
document.all.Layer2href.href=obj.bglayerimage;
document.all.Layer2.title=obj.title;

}

---

ma non mi funziona....


[edit]
ho cambiato alcune cose, prese da ciò che ha scritto soulhome , ed ora funziona:

Codice HTML:

---

function upDate(obj)        {
document.all.Layer2.style.backgroundImage="url("+imageurl(obj.src)+")";
}

---

ed ho ovviamente aggiunto

Codice HTML:

---

function imageurl(str){
var newstr="";
i = str.lastIndexOf(".");
x=i-7;
for(k=0; k<=x; k++){
newstr+=str.charAt(k);
}
for(y=i, b=str.length; y<=b; y++){
newstr+=str.charAt(y);
}
return newstr;
}

---

adesso sto' semplificando il codice, ed al posto del codice sopra citato ho messo:

Codice HTML:

---

function imageurl(str){
 var i = str.lastIndexOf(".");
 return str.substr(0, i-6) + str.substr(i);
}

---

come mi ha consigliato Heracleum, e funziona perfettamente!

se volete vedere il risultato parziale, è sempre all url di prima, ovvero :
http://www.orion42.altervista.org/java3.htm
appena faccio una bozza della versione definitiva vorrei un parere sul codice,
conoscendomi e sapendo che molte cose non le conosco, avro' allungato il codice in un modo assurdo...
cmq l'importante è che funzioni!

Grazie a tutti !

Altra cosa importante:

Codice:

---

function upDate(obj)        {
document.all.Layer2.style.backgroundImage="url("+imageurl(obj.src)+")";
}

---

document.all funziona SOLO su Internet Explorer e quindi puoi renderlo funzionante su tutti i browser semplicemente cambiandolo in:

Codice:

---

function upDate(obj)        {
getElementById('Layer2').style.backgroundImage="url("+imageurl(obj.src)+")";
}

---

E lo stesso ovunque hai usato document.all
traduci
document.all.NOME
in
getElementById('NOME')

un altra cosa che non sapevo,
grazie !

adesso finendo di sistemare è spuntato un altro problema.

Alcune immagini sono + grandi dello spazio per l'immagine.
nel codice ho messo che cliccando sull'immagine si apre l'immagine completa in una nuova finestra, ma nella pagina in cui compare, oltre all' anteprima piccola anche l'immagine "grande" nel riquadro principale di dimensioni stabilite
530x430px

Codice:

---

  <div id="Layer2" title="Viewer" style="width:530px;  height: 430px; z-index:2; background-image: url(images/foto/orione/constel.jpg); background-repeat:no-repeat; background-position:center;  border:2px solid #4040FF; margin-top:4px">

---

che corrispondono alle dimensioni massime, mi si crea un problema: per molte immagini di poco + grandi viene tagliata una strisciolina, e poi con background-position:center; le ho centrate; ma per le immagini + grandi o che non è centrato l'oggetto di interesse mi si vede solo una porzione !

Avevo avuto lo stesso problema per le anteprime e ho cambiato da tag div a img, solo che in quel caso le immagini le vedevo direttamente e il loro codice era presente, e non generato.
Dovrei inserire uno script che faccia il check su width e height e se troppo grandi le rimpicciolisca di un tot , finchè non siano delle dimensioni appopriate.
ma come al solito nn so come fare...

cmq non mi funziona se metto solo

getElementById("Layer2").

devo settare

document.getElementById("Layer2").

e cmq con le "" e non ' ' , ho controllato, senno' non funzionava proprio