Ciao ragazzi, vi spiego, vorrei fare "prendere ispirazione"da questo sito http://www.corto.com
Però come si fà una costruzione del genere?
Sono css?...o javascript?
Onestamente vorrei che al cambio delle foto vi fosse un effetto "ipersolarizzato" che poi diventa normale...
C'è quello e quello.
Prova a visualizzare il codice sorgente (in FF basta premere CTRL-U)....
Ciao
Pressappoco ho capito la tua richiesta, ma mi pare che non sia una richiesta da "actionscript".
..nel dubbio mi son "buttata" in questa sezioneOriginariamente inviato da and80
Pressappoco ho capito la tua richiesta, ma mi pare che non sia una richiesta da "actionscript".
Come funziona..davvero non capisco..anche perchè pure io vorrei che "tutto" mi risultasse cosi ben proporzionato a prescindere dalle varie risoluzioni degli utenti
Ah ok, se è quello si tratta di javascript e non di actionscript.
Per il momento sposto lì.
OK GRAZIE AND80, SPERIAMO CHE QU INELLA GIUSTA SEZIONE QUALCUNO POSSA AIUTARMI...
Di sicuro non c'è, soltanto Adobe Flash; per il resto c'è tutto, HTML CSS e JavaScript.
Le immagini sono tutte, a dimensione nativa, da 900x634 pixel; vengono lasciate "stirare" dal Browser dell' Utente per adattarle al monitor.
Questo si può ottenere assegnando width="100%" al Tag IMG; che difatti accetta Valori sia in pixel che in percentuale.
Processa questo modellino così com'è, e l' immagine ti apparirà a dimensione nativa; poi inserisci 100% in WIDTH e ri-salva.
Riduci/trascina la finestra anche, per constatare; fai click di destro => Proprietà sull' immagine e vedi le diverse dimensioni "sul campo" che assume.
Si definisce 100% solo per una dimensione (la larghezza, nel nostro caso), l' altra scaturisce di conseguenza mantenendo le proporzioni.codice:<html> <head> <TITLE>Stretching image</TITLE> </head> <body bgcolor="#909090"></body> </html>
AZZERAMENTO DEL MARGINE DI BODY.
Rimane un margine (grigio silver #909090 colore di sfondo dato al BODY) tutt' attorno all' immagine. Per non averlo, bisogna dire al Browser di stare a zero con la marginatura; questo perchè di default (= in mancanza di diversa indicazione) non stanno "a zero" ma applicano spontaneamente un margine di circa 8 pixel.
Lo possiamo fare col "vecchio" sistema degli Attributi:
<body bgcolor="#909090" topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">
o con lo STYLE; questa singola istruzione azzera tutti e quattro i margini del BODY:
<body bgcolor="#909090" style="margin: 0;">
come pure:
<body bgcolor="#909090" style="margin: 0px 0px 0px 0px;">
che è l' equivalente in-line del Cascading Style Sheet richiamato come file.css esterno
http://www.corto.com/css/corto.css
dal Tag   <link rel="stylesheet" href="css/corto.css" media="all" />   che trovi all' inizio del Documento.
Dopo per far intercambiare le immagini, impiegheremo JavaScript.
Osserva per intanto come si compila un Array :
codice:var images = new Array(); images[0] = "http://www.corto.com/images/womens/01_CORTO_playbag.jpg"; images[1] = "http://www.corto.com/images/womens/04_CORTO_elisabeth_python.jpg"; images[2] = "http://www.corto.com/images/womens/02_CORTO_kaori_clutch.jpg";
Inanzitutto grazie Stray...davvero che Dio benedica gente cosi gentile in questo forum...
-------------------
Ho letto, io uso dreamweaver....Non ho ben capito come dare 100% al tag dell'immagine (io al massimo ero abituata a darlo alle varie tabelle)
Ti prego se mi dai una mano step by step lungo questo arduo percorso..puoi chiedermi(quasi tutto)
Semplicemente, lo scrivi tra gli apici di width="" che ho già messo nel Tag, così:Originariamente inviato da 77Mina77
... come dare 100% al tag dell'immagine (io al massimo ero abituata a darlo alle varie tabelle)
Usa un momento il Blocco Note di Windows (START => Tutti i Programmi => Accessori); se hai MAC ce n'è un equivalente "di serie", da usare come Editor di Testo.
Copia-Incolla il codice che ho postato e fai "Salva con Nome..." (da File, in alto) scrivendoci del tipo arturo.html l'importante è che il nome che dai al file nascente, lo completi con l' Estensione .html o .htm
Quindi te lo vai a vedere (ad aprire) con un Browser che vuoi; IExplorer, Netscape, Mozilla ecc. .
Devi giusto ricordarti in che Cartella (o Desktop) lo hai salvato.
Questo è il procedimento preistorico per creare un file html
Se però hai "scavalcato" il mio modellinoe sei andata subito a smanettare l' img width="100%" in un layout più complicato, un momento allora!
Essendo il Tag IMG contenuto in un altro Elemento, prenderà la larghezza di questo come riferimento per estendersi al 100%.
Nel mio esempio, l' Elemento contenitore è il BODY (che è diciamo, "a tutto campo"); ma se ad esempio tu avessi,l' immagine non risulterà più larga quanto tutta la finestra, ma larga quanto tutta (100%) la Tabella che la contiene, la quale però vuole essere solo il 40% della finestra.codice:<table width="40%"> <td>
Se poi addirittura avessimo:con la TABLE senza una WIDTH assegnata, allora è indifferente aver dato width="100%" o niente (width="" indefinita) all' immagine perché la Tabella è in partenza chiusa su se' stessa a mo' di elastico, poi sarà il contenuto (l' Immagine) a farla espandere, .. quanto basta.codice:<table> <td>
Il risultato di questo sarà l' immagine che appare alle sue dimensioni native di 900x634 px
Nel precedente esempio con <table width="40%"> invece, dipende da che Navigatore:
- con IExplorer l' Immagine non andrà sotto il suo 100%, espanderà/forzerà la tabella se il table width="40%" le va stretto, e ti darà nuovamente l' immagine alle sue dimensioni native;
- Netscape/Mozilla invece la campionano sul table width="40%" e ti daranno un' immagine rimpicciolita.
Prova infine con una più larga table width="90%" che non vada più stretta ad IExplorer e vedrai uguali risultanze con entrambi i Navigatori.
Ormai JavaScript facciamo domani ....
Giusto un passetto ancora sugli Array.
Scrivendo images[1] o images[2] sarà come scrivere nelle parti in JavaScript, gli URL corrispondenti elencati nell' Array.
Cosa cambia.
Cambia che quello che cambia, sono solo i numeri tra le parentesi [] quindi "roba" che possiamo far gestire a degli operatori numerici mentre invece gli URL così come sono, son chiacchere: non possiamo fare
02_CORTO_kaori_clutch.jpg +1 e pretendere che questo voglia tradursi nell' immagine successiva 03_CORTO_darksideofthemoon.jpg
Possiamo invece mettere tra le parentesi [] una variabile a valore numerico e farla incrementare passo dopo passo:
images[x]
Entrerà poi in gioco una stringa di esecuzione JS, un' istruzione JavaScript per andare a cambiare il Valore di SRC="" nel Tag IMG che ci fa da visualizzatore; e così avremo la slide-show.
Puoi inserire questo pulsante prima del Tag img nel solito modellino, e vedi già succedere qualcosa:
<input value="cambia" type="button" onClick='document.images[0].src="http://www.corto.com/images/womens/06_CORTO_mori_tote.jpg";'
>
document.images[0].src=""; è appunto la stringa di esecuzione.
N.B.: È una pura combinazione se ci ritroviamo il termine images[0] nella stringa di esecuzione e nell' Array.
Nel compilare l' Array potevamo scegliere anche un' altra parola e fare ad es.:
var francesca = new Array();
francesca[0] = "URL_01.jpg";
francesca[1] = "URL_02.jpg";
Nelle stringhe di esecuzione invece:
document.images[0]
document.frames[0]
document.forms[0]
consentono a JavaScript di individuare l' Elemento su cui deve intervenire, e non sono termini che possiamo cambiare arbitrariamente.
Sempre in base al numerino tra [] document.images[0] individua il primo Tag IMG nel Documento (primo, ed unico img nel precedente esempio).
Ma altre vie anche sono possibili. In questo Codice impiego
document.getElementById("quale_id")
il che richiede di conferire un id="" all' Elemento che si vuole collegare alla funzione JS.
Rifacendosi al sito che hai postato; in basso troverai due pulsanti per sfogliare le foto.
codice:<html> <head> <TITLE>Browsing images</TITLE> <script type="text/javascript" language="javascript"> var i = 0; var pictures = new Array(); pictures[0] = "http://www.corto.com/images/womens/01_CORTO_playbag.jpg"; pictures[1] = "http://www.corto.com/images/womens/02_CORTO_kaori_clutch.jpg"; pictures[2] = "http://www.corto.com/images/womens/03_CORTO_darksideofthemoon.jpg"; pictures[3] = "http://www.corto.com/images/womens/04_CORTO_elisabeth_python.jpg"; pictures[4] = "http://www.corto.com/images/womens/05_CORTO_elisabeth_sparkly.jpg"; pictures[5] = "http://www.corto.com/images/womens/06_CORTO_mori_tote.jpg"; pictures[6] = "http://www.corto.com/images/womens/07_CORTO_elisabeth.jpg"; pictures[7] = "http://www.corto.com/images/womens/08_CORTO_Mori_shopping.jpg"; pictures[8] = "http://www.corto.com/images/womens/09_CORTO_susan_swarowski.jpg"; pictures[9] = "http://www.corto.com/images/womens/10_CORTO_BIG_lips.jpg"; pictures[10] = "http://www.corto.com/images/womens/11_CORTO_play_evening.jpg"; pictures[11] = "http://www.corto.com/images/womens/12_CORTO_lady_priscilla.jpg"; </script> </head> <body text="#000000" bgcolor="#E0E0E0" style="margin: 0;"> <div style="height: 94%; overflow: auto;">Sample by Straystudio
Permessi di invio
Rispondi quotando