salve a tutti: ho un piccolo problema: sono riuscito a reperire un codice che ritengo possa essere molto utile e che vi lascio qui di seguito in due "tranches": il mio unico problema è che non riesco in nessuna maniera ad applicarlo al sito: javascript nn lo conosco se nn poche minime cose e nn riesco a capire dove vanno messi questi due codici nella pagina: se vanno modificati, uniti e/o supportati da quale altro script o comando jsp o html o altro ancora per riuscire finalmente a far apparire la mia immagine della grandezza determinata dalla risoluzione dello schermo! poi: vanno messi tutti e due nell'head gli script o ...: ecco: questi sono i codici insieme alla scarna spiegazione dell'autore:
Vediamo un esempio in cui vogliamo inserire in un certo punto della pagina una immagine con una dimensione corretta rispetto alla dimensione dello schermo. Il primo passo quindi è di creare le varie immagini con le dimensioni per cui vogliamo ottimizzare il browser. Immaginiamo di creare quindi tre immagini chiamate "piccola.gif", "media.gif" e "grande.gif" da utilizzare rispettivamente per le risoluzioni 640 x 480, 800 x 600 e 1024 x 768 o superiore.
Per rilevare la risoluzione del monitor il codice è il seguente:
<script language="JavaScript">
var NN4 = (document.layers) ? true : false;
var IE4 = (document.layers) ? false : true;
function Risoluzione ()
{
if ((NN4) || (IE4))
{
RisWidth=screen.width;
RisHeight=screen.height;
}
else
{
RisWidth=800;
RisHeight=600;
}
}
</script>
Inizialmente controllo la versione dei browser: NN4 varrà true se si sta usando Netscape Communicator 4.0 o superiore, false negli altri casi. Stesso discorso per IE4 che corrisponde a Microsoft Internet Explorer.
Una piccola nota sull'assegnazione
var NN4 = (document.layers) ? true : false;
che magari non tutti conoscono. Essa è una forma contratta che sta per:
if (document.layers=true) {NN4=true} else {NN4=false}
Di seguito assegno alle variabili RisWidth e RisHeight i valori rilevati, mentre per i browser più vecchi che non riconoscono tale oggetto assegno un valore di default, in questo caso 800 x 600.
Vediamo il controllo della risoluzione in azione:
Avendo a disposizione tale controllo possiamo inserire dinamicamente l'immagine della dimensione corretta in mezzo al codice HTML:
<script language="JavaScript">
if ((NN4) || (IE4))
{
if (RisWidth<=640) {document.write('<img src="piccola.gif">')}
else if (RisWidth<=800) {document.write('<img src="media.gif">')}
else if (RisWidth>=1024) {document.write('<img src="grande.gif">')}
}
else
{
document.write('<img src="grande.gif">');
}
</script>
Questo procedimento, se applicato alle parti più importanti del sito, come immagini di intestazione, barre di pulsanti, ecc. può permettere con poche righe di codice in più e con un tempo di caricamento praticamente invariato (vengono caricati solo gli elementi per la vostra risoluzione), di ottenere delle pagine più curate e maggiormente fruibili.
Questo non è solo un discorso che riguarda l'estetica, ma anche una migliorata funzionalità.
Nei siti attuali, con un monitor da 17" impostato a 1024 x 768 o 1280 x 1024, risoluzioni normali per questo tipo di monitor, spesso si ha molta difficoltà a leggere i tasti e le barre di navigazione realizzate con immagini, perché queste ultime risultano esageratamente piccole. Tra l'altro in questi casi non c'è veramente nulla da fare per gli utilizzatori di Explorer e Netscape, perché le funzioni presenti per ingrandire e ridurre, agiscono solo sul testo e non sulle immagini. L'unico browser che permette di ingrandire anche le immagini tramite una funzione zoom, è Opera (di Opera software) che rispetto alla dimensione normale del 100% può ridurre fino al 20% o ingrandire fino al 1000%
link
Vediamo un esempio in cui vogliamo inserire in un certo punto della pagina una immagine con una dimensione corretta rispetto alla dimensione dello schermo. Il primo passo quindi è di creare le varie immagini con le dimensioni per cui vogliamo ottimizzare il browser. Immaginiamo di creare quindi tre immagini chiamate "piccola.gif", "media.gif" e "grande.gif" da utilizzare rispettivamente per le risoluzioni 640 x 480, 800 x 600 e 1024 x 768 o superiore.
Per rilevare la risoluzione del monitor il codice è il seguente:
<script language="JavaScript">
var NN4 = (document.layers) ? true : false;
var IE4 = (document.layers) ? false : true;
function Risoluzione ()
{
if ((NN4) || (IE4))
{
RisWidth=screen.width;
RisHeight=screen.height;
}
else
{
RisWidth=800;
RisHeight=600;
}
}
</script>
Inizialmente controllo la versione dei browser: NN4 varrà true se si sta usando Netscape Communicator 4.0 o superiore, false negli altri casi. Stesso discorso per IE4 che corrisponde a Microsoft Internet Explorer.
Una piccola nota sull'assegnazione
var NN4 = (document.layers) ? true : false;
che magari non tutti conoscono. Essa è una forma contratta che sta per:
if (document.layers=true) {NN4=true} else {NN4=false}
Di seguito assegno alle variabili RisWidth e RisHeight i valori rilevati, mentre per i browser più vecchi che non riconoscono tale oggetto assegno un valore di default, in questo caso 800 x 600.
Vediamo il controllo della risoluzione in azione:
Avendo a disposizione tale controllo possiamo inserire dinamicamente l'immagine della dimensione corretta in mezzo al codice HTML:
<script language="JavaScript">
if ((NN4) || (IE4))
{
if (RisWidth<=640) {document.write('<img src="piccola.gif">')}
else if (RisWidth<=800) {document.write('<img src="media.gif">')}
else if (RisWidth>=1024) {document.write('<img src="grande.gif">')}
}
else
{
document.write('<img src="grande.gif">');
}
</script>
Questo procedimento, se applicato alle parti più importanti del sito, come immagini di intestazione, barre di pulsanti, ecc. può permettere con poche righe di codice in più e con un tempo di caricamento praticamente invariato (vengono caricati solo gli elementi per la vostra risoluzione), di ottenere delle pagine più curate e maggiormente fruibili.
Questo non è solo un discorso che riguarda l'estetica, ma anche una migliorata funzionalità.
Nei siti attuali, con un monitor da 17" impostato a 1024 x 768 o 1280 x 1024, risoluzioni normali per questo tipo di monitor, spesso si ha molta difficoltà a leggere i tasti e le barre di navigazione realizzate con immagini, perché queste ultime risultano esageratamente piccole. Tra l'altro in questi casi non c'è veramente nulla da fare per gli utilizzatori di Explorer e Netscape, perché le funzioni presenti per ingrandire e ridurre, agiscono solo sul testo e non sulle immagini. L'unico browser che permette di ingrandire anche le immagini tramite una funzione zoom, è Opera (di Opera software) che rispetto alla dimensione normale del 100% può ridurre fino al 20% o ingrandire fino al 1000%
link
