risoluzione sito adattabile

flash&co

Nuovo Utente
29 Mag 2005
3
0
0
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
 

flash&co

Nuovo Utente
29 Mag 2005
3
0
0
ciao:

io ho provato a mettere il primo script nell'head e il secondo nel body dove volevo che mi apparisse l'imm e l'onload nel tag body come mi hai detto, ma nn devo aver eseguito una procedura corretta perchè nn funge... chissà se qualcuno paziente può inserire un'esempio di script di webpage testata funzionante con il codice di cui sopra inserito cosicchè sparirebbero tutti i dubbi... thanks comunque per l'attenzione.
 
Discussioni simili
Autore Titolo Forum Risposte Data
StePunk [HTML] sito responsive / zoom automatico / risoluzione HTML e CSS 2
T Problema di risoluzione dello sfondo per un sito web Photoshop 1
P Risoluzione del sito si può adattare? HTML e CSS 0
A ottimizzare sito per risoluzione 1024x768 Webdesign e Grafica 0
G scrittura e risoluzione sito su diversi PC HTML e CSS 7
StefanoITA Adattare il sito alla risoluzione del visitatore HTML e CSS 5
M Adattare sito a risoluzione video [era:help me] HTML e CSS 6
P risoluzione sito Webdesign e Grafica 1
D risoluzione sito Webdesign e Grafica 2
J esiste un javascript che mi modifica la risoluzione del sito? Javascript 1
D devo creare il mio sito web, sul quale risoluzione del video devo crearlo? HTML e CSS 9
F Risoluzione in PNG o JPG Photoshop 2
C [OFFRO] Click Day - Risoluzione Captcha Offerte e Richieste di Lavoro e/o Collaborazione 4
P [Photoshop] Risoluzione e similari Photoshop 3
maicol07 [PHP][MySQL] Risoluzione errori PHP 1
Strato-Fortex [Javascript] Risoluzione funzione cifrario di Cesare Javascript 4
A risoluzione immagini Webdesign e Grafica 1
A [Photoshop] Problemi risoluzione foto Photoshop 3
I Risoluzione immagine Webdesign e Grafica 11
filomeni Risoluzione ai problemi delle code nelle casse Presenta il tuo Sito 0
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
steak Dubbio su risoluzione immagini Tumblr via Flickr HTML e CSS 6
otto9due Funzione per ridimensionare div in base alla risoluzione schermo.. Javascript 5
L Adattare sfondo in base alla risoluzione WordPress 3
M Mostrare o meno banner pubblicitari a seconda la risoluzione del device Javascript 10
S Div si spostano cambiando risoluzione HTML e CSS 0
G risoluzione schermo con php PHP 2
A Risoluzione della pagina Webdesign e Grafica 0
M Sfondo pagina a tutto schermo a prescindere dalla risoluzione HTML e CSS 10
A Risoluzione siti internet e compatibilità browser HTML e CSS 1
Eugene Marchio RINAQUACER in vettoriale (o alta risoluzione) Webdesign e Grafica 2
I Problema risoluzione e sfondo HTML e CSS 4
V centrare un layout a qualunque risoluzione HTML e CSS 3
V filmato flash che si adatta alla risoluzione dello schermo Flash 1
K Sfondo regolabile in base alla risoluzione Webdesign e Grafica 0
Ailinen Il pc cambia risoluzione Hardware 12
I Risoluzione fissa. HTML e CSS 3
M Problema scrittura e forse risoluzione... HTML e CSS 5
A Passare la risoluzione da javascript a php in modo trasparente PHP 31
D Adattare contenuto a risoluzione utente HTML e CSS 5
S Rimpicciolire immagini secondo risoluzione schermo HTML e CSS 4
D dimensionamento automatico al cambiamento di risoluzione di un menu floattante Javascript 0
M Risoluzione Flash 5
W centrata a qualsiasi risoluzione HTML e CSS 8
SolidSnake4 risoluzione schermo HTML e CSS 2
borgo italia div centrato rispetto risoluzione HTML e CSS 9
P Adattamento automatico risoluzione monitor Webdesign e Grafica 10
PoLe La risoluzione video maggiormente usata Discussioni Varie 3
L risoluzione schermo HTML e CSS 4
A Impostazione layout per risoluzione pagine HTML e CSS 1

Discussioni simili