|
Questo blog riguarda essenzialmente i javascript e i dhtml (salvo richieste
su altri argomenti). L'obiettivo è quello di fornire sia gli script sia una
spiegazione (abbastanza semplice... spero! ^^) su come inserirli e
personalizzarli.
Tutorial IoBloggo (6)
CSS (1)
DHTML (7)
JavaScript (6)
Annunci (2)
Risposte (2)
Promemoria e proposte (1)
segui questo blog!
linkami usando il codice sottostante al bannerino! ^^
oggi
2004
DHTML
HTML.it (tutorial)
JS
HTML (tutorial)
Codice ASCII
www.google.it
www.google.com
www.google.com
www.google.com
www.google.com
forum.it.altervista.org
www.google.ch
www.google.it
www.google.it
www.google.it
| |
|
|
1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
9 |
10 |
11 |
| 12 |
13 |
14 |
15 |
16 |
17 |
18 |
| 19 |
20 |
21 |
22 |
23 |
24 |
25 |
| 26 |
27 |
28 |
29 |
30 |
31 |
|
|
|
|
64087
|
|
|
|
Ecco uno script interessante soprattutto per chi ha necessità di mostrare,
sul proprio blog, un tot di immagini (anteprime di template, foto, pixel art,
ecc) e non vuole fare una colonna lunghissima di preview.
Qui trovate l'esempio.
Partiamo dalla pagina html:
Questo invece è lo script in sé:
Iniziamo a studiarlo.
Uno: *deve* essere inserito uno style (interno
al tag head) con i dati del selettore input! Questo modifica la
grafica dei pulsanti che, nell'esempio, sono chiamati: precedente, play
- stop e successiva.
Due: il restante testo è settato o nel body o in td (se lo
script è interno ad una tabella).
Tre: nei tre tag input c'è l'opzione value: potete
modificarla (tipo mettere "prima" invece che "precedente" o
quello che volete); quello sarà il testo che compare sui pulsanti.
Quattro: nel resto modificate solo ciò che è *esterno* ai tag
(ad esempio "Descrizione:") ma NON toccate i comandi INTERNI ai vari
TAG!!
Cinque: passiamo allo script. Trovate questa frase: //configure the below images and description to your own.
Nell'elenco sottostante (di g_ImageTable[g_imax++] = new Array)
dovete:
- prima coppia di virgolette ("..."):
mettete l'url delle immagini che volete inserire (le immagini *possono*
essere di dimensioni differenti);
- seconda coppia di virgolette ("..."):
mettete il testo che comparirà a fianco della Descrizione.
Sei: dovete mettere tante frasi di cui sopra quante immagini volete
inserire. Se volete mettere quindici immagini ci dovranno essere quindici
di g_ImageTable[g_imax++] = new Array, ognuno con l'url della propria immagine
e la sua descrizione.
Sette: immediatamente sotto c'è la frase g_dwTimeOutSec=3
che indica i secondi che passano nella visualizzazione automatica
tra un'immagine e l'altra. Settatelo come più vi sembra adatto (io ho messo 3).
Fine ^^ Se avete domande, chiedete pure :)
esh :: 30/03/2004 18:08
|
|
|
|
|
Ho chiuso il sondaggio "Su cosa preferisci dei tutorial?" Risultati: Ora il nuovo sondaggio è "Su cosa preferisci gli script?"; votate =P almeno so cosa vorreste trovare su questo blog ^_-
esh :: 30/03/2004 14:57
|
|
|
|
|
Per questo ho fatto due differenti esempi:
- uno con lo style interno ai tag (qui);
- uno con lo style interno ai CSS (qui).
Poiché la modifica dello script è identica per entrambi, inizio col
far vedere le due differenze grafiche.
DropDown Menu con Descrizione
(style interno ai vari tag)
DropDown Menu con Descrizione
(style interno ai CSS)
Nel primo caso (style interno ai tag) bisogna segnare,
all'interno dei tag select, input e span le diverse
caratteristiche del font (font-family, font-size, color e tutto ciò che volete,
anche bold, italics, ecc), dello sfondo (background-color) e dei bordi (border).
Nel secondo caso (style interno ai css) ho segnato,
nel tag style, dei selettori (select, input e #descriptions),
dando loro le caratteristiche che, nell'esempio precedente, erano interne ai
vari tag.
Personalmente mi trovo meglio coi CSS ma mi rendo conto che
c'è, in effetti, una differenza; avete notato come, nel primo caso, il
bottoncino "visita" abbia il contorno mentre, se impostato coi CSS,
questo compaia solo quando si clicca il bottoncino stesso, mentre di norma non
c'è? Ecco, questa è la differenza. Ad ogni modo scegliete il metodo che vi è
più congeniale dato che questo è irrilevante ai fini del funzionamento dello
script.
Lo script deve essere inserito nel tag body,
precisamente nel punto in cui volete che compaia questo form (le tabelle che ho
inserito nella pagina servono appunto a mostrare come questo compaia ovunque lo
si desideri).
Come personalizzare lo script.
I dati da modificare sono:
- i vari option value, dove vanno inseriti gli url (indirizzi) dei link e
il testo che deve comparire all'interno del form;
- per far aprire il link in una *nuova* pagina bisogna usare, sempre nel tag
"option value", il comando target="newwin" (che
corrisponde al target="_blank" dell'html);
- in corrispondenza agli option value bisogna modificare, nello script,
i textdisplay, che poi è il testo che compare *sotto* il form; sono
ordinati da [0] a [N] (dove N indica il numero di link che avete inserito).
Il resto va lasciato come è.
Il funzionamento di questo script è molto semplice, più che
altro può essere noioso da settare se si hanno davvero MOLTI link ma, per
contro, evitereste una colonna lunghissima di testo, riducendola notevolmente ^^
Al solito non sono stata molto approfondita nella spiegazione
e di certo avrò dato per scontato che si capisse ogni cosa; se così non fosse
non esitate a lasciare un commento e a chiedere delucidazioni ^_^
esh :: 30/03/2004 13:40
|
|
|
|
|
Questa è la pagina di esempio e sotto trovate il codice HTML:
Il codice per ottenere quel risultato (completamente personalizzabile, come
vedremo poi) è suddiviso in tre parti.
Prima parte da inserire nel tag head (dopo title)
Seconda parte da inserire nel tag body (subito dopo l'apertura del tag)
Terza parte da inserire nel tag link (in ogni link in cui volete presente il tooltip)
Adesso vediamo, punto per punto, dove effettuare eventuali personalizzazioni.
Prima parte.
E' un normalissimo CSS, quindi completamente configurabile a proprio piacimento
^^
- position: lasciatelo come è;
- font-family: mettete il tipo di carattere;
- font-size: grandezza del carattere in pixel;
- color: colore del carattere;
- font-weight: scegliete tra bold, normale, sottile, ecc;
- width: larghezza, in pixel, della tabella tooltip;
- border: spessore tipo e colore di bordo;
- padding: distanza (interna) tra il testo e il bordo della tabella;
- background-color: colore di sfondo;
- visibility: lasciate come è;
- z-index: lasciate come è;
- filter: se lo lasciate compare quell'effetto "ombra", di cui potete modificare il colore (color) e la
direzione (direction) - giocate coi parametri ^_-
Importante! Come vedremo poi, si può modificare la larghezza e lo sfondo
della tabella *anche* nei vari link, magari per dare maggiore risalto a qualcuno
in particolare ma se invece volete un effetto omogeneo, QUESTI parametri saranno
quelli che si ripeteranno per ogni tooltip, quindi sceglieteli bene ^_-
Seconda parte
Lasciate tutto esattamente come è.
Terza parte
La terza parte è quella che va aggiunta al tag <a href="....>
(guardare la pagina HMTL d'esempio).
Le personalizzazioni sono:
- 'Testo del tooltip' (nell'esempio: 'Esh Blog - il mio blog personale') - ci va il testo che volete far
comparire. IMPORTANTISSIMO! Se ci sono apici (') all'interno del testo, dovete mettere un backslash davanti!!! (esempio:
'Maria\'s Blog');
- all'interno della seconda coppia di apici (') potete mettere un colore di sfondo alternativo rispetto a quello
impostato di standard (nell'esempio: '#FFFFDD');
- l'ultimo dato, separato da una virgola e che non ho inserito, è la possibile larghezza alternativa della
tabella, da non indicare con px! (nell'esempio: 300 e NON 300px)
esh :: 24/03/2004 15:52
|
|
|
|
|
Questa nuova categoria nasce con due obiettivi:
1) fare da promemoria a me per quello che devo fare (elencando le richieste non evase)
2) dare la possibilità a voi di avere una categoria in cui lasciare commenti con le richieste. Da fare:
- finestra di alert con scritta su più righe;
- tabella personalizzabile a passaggio sui link ("alt") Se mi sono dimenticata qualche richiesta... rinfrescatemi la memoria ^^"
esh :: 20/03/2004 18:13
|
|
|
|
|
Ci sono diversi tipi di modi in cui si può personalizzare, con una scritta,
la barra inferiore di status del browser. Io qui ne proporrò tre, che sono:
- scritta fissa;
- scritta che compare al passaggio del mouse su un link (ma si può fare
anche su immagini e altro se si accoda il codice);
- scritta lampeggiante.
Scritta fissa
L'esempio è qui.
Questo l'html della pagina:
Per far comparire la scritta basta copiare e incollare il JavaScript subito dopo il tag body e
ovviamente, personalizzarlo (c'è solo una riga di codice, credo non necessiti di spiegazioni ^_- La solita
raccomandazione è: non cancellate quello che DEVE rimanere, in questo caso le virgolette => ")
Scritta che compare al passaggio del mouse su un link (e non solo)
L'esempio lo trovate qui.
Ecco il codice html della pagina:
1) il codice JS va sempre inserito dopo il tag body, in questo caso va anzi messo
all'interno del tag link (ma funziona anche con il tag img);
2) la personalizzazione avviene nel comando onMouseOver, dove dovete mettere il vostro testo al posto di
quello che vedete comparire nella barra inferiore di status (mi raccomando, lasciate gli apici!).
Scritta lampeggiante
L'esempio lo trovate qui.
Ecco il codice html della pagina:
1) non cancellate i credits dell'autore!
2) dopo var yourwords dovete inserire il testo che volete veder lampeggiare (non cancellate le virgolette => ")
3) var speed riguarda la velocità di lampeggiamento; più il valore è elevato, più lampeggia lentamente; più il
valore è basso, più lampeggia velocemente (vi sconsiglio di farlo lampeggiare troppo velocemente; non si leggerebbe
nulla di ciò che c'è scritto e sarebbe fastidioso).
esh :: 20/03/2004 16:35
|
|
|
|
|
L'imagetoolbar è quella opzione che fa sì che compaiano delle iconcine
sulle immagini, per facilitarne il salvataggio, la stampa o l'invio tramite
e-mail.
C'è ovviamente il modo di aggirare questa possibilità.
Per l'esempio andate qui: come vedrete, anche passandoci sopra col mouse non
compariranno quelle icone (NB: non ho inserito all'interno della pagina la
possibilità di *non* salvare le immagini! Questo esempio serve solo per
togliere le suddette icone e va affiancato per forza ad uno script se si vuole
rendere complicata la vita ai "ladri" di immagini).
Farlo è semplicissimo; ecco l'html della pagina.
Il comando è dato dal meta tag "imagetoolbar"
con opzione content="no". Se volete
dunque disabilitare quella funzionalità, basta che lo copiate e lo incolliate
(subito dopo il tag html e subito prima del tag title).
esh :: 18/03/2004 11:51
|
|
|
|
|
Molte delle opzioni fornite da IoBloggo (sondaggi, login, aggregators, calendario) sono inserite nelle tabelle e questo può portare dei problemi per settarne il carattere (colore, grandezza, ecc). Il metodo più facile è, all'interno del tag style, inserire:
TD { font-family: tipo di carattere; font-size: grandezza in pixel del carattere; }
TD { font-family: Verdana, Arial; font-size: 10px; } Se per caso ci fossero però più tabelle all'interno del vostro layout e queste necessitassero di un diverso settaggio, Anija ha creato un id (il cancelletto "#" è obbligatorio) a parte.
#tabellaiobloggo { font-family: tipo di carattere; font-size: grandezza in pixel del carattere; }
#tabellaiobloggo {font-family: Verdana, Arial; font-size: 10px; }
esh :: 17/03/2004 15:28
|
|
|
|
|
Per l'esempio visivo di questo tutorial, andate qui.
Per avere la scrollbar trasparente è necessario o utilizzare i colori ad hoc
oppure usare il filtro "chroma".
Innanzitutto c'è da dire che i dati impostati per la scrollbar nel selettore
body sono sì ereditari (quindi i div e non solo la pagina stessa li
utilizzeranno) ma non sono "fissi", nel senso che nel selettore div
(o in eventuali classi) è possibile impostare di volta in volta dei dati
differenti.
Vediamo l'html della pagina che ho fatto.
Per le prime due classi di div, cioè .div1 e .div2
ho impostato un colore di sfondo (diverso per entrambi) e ho reinserito i dati
della scrollbar, che così appare completamente "fusa" con il div
stesso.
Per il terzo div, cioè .div3, ho invece utilizzato filter: chroma(color=#87A2D3) allowTransparency;
dove #87A2D3 è il colore scelto per il face, per l'highlight,
per il darkshadow e per il track nel settaggio iniziale (quello
del selettore body) della scrollbar, ottenendo così l'effetto
trasparente.
Le differenze tra le due possibilità sono visibili: nel
primo caso la scrollbar appare interna al div, nel secondo caso è invece
esterna.
Non è possibile rendere trasparente la barra di scorrimento
della pagina, dato che il selettore body non interpreta il filtro chroma
e non è nemmeno possibile contenerlo in un div.
Nel caso in cui un div abbia come sfondo una immagine
e si voglia che la scrollbar sia trasparente, è sufficiente dare un qualsiasi
colore (strano, che si abbia la certezza che non venga utilizzato*) tanto al chroma
quanto agli attributi su cui deve agire per apparire trasparente ^^
* esempio: se lo sfondo è nero basterà cercare un colore vicinissimo al nero
(ma non nero stesso!), tipo #141414.
Ovviamente questo esempio è "sterile", nel senso
che si può rendere totalmente trasparente una scrollbar oppure lasciare solo la
freccina o ancora avere solo parte del suo perimetro. Per questo basta che
giochiate un po' con i dati ^__^
esh :: 17/03/2004 15:19
|
|
|
|
|
Con il comando (di stile) filter: Alpha(opacity=NN); (dove NN corrisponde ad un numero di al massimo due cifre) si ottiene un effetto opaco di un dato elemento della pagina. Questa è la "tabella base" che useremo per l'esempio
Il problema principale, sollevato da demiurgo77, è che anche i contenuti di questo elemento (quali il testo e le immagini) risultano opachi.
Ho fatto diverse prove e, nel dubbio di essermi persa qualcosa, ho anche controllato su internet, ma pare non ci sia una soluzione diretta a questo problema. Ho provato allora ad aggirarlo. La prima soluzione, un po' "banalotta", è quella di dare un colore di sfondo alla tabella che sembri opaco.
Tenedo presente la tabella di cui sopra, ho agito così.
Sono quindi partita da un colore a caso (blu - #0000FF) ed, in una pagina di prova, lo ho inserito come colore di sfondo alla tabella, a cui ho poi dato opacity pari a 50.
Ho fatto il print-screen (in alcune tastiere, stamp), ho aperto Photoshop, ho selezionato "nuovo file" (la cui dimensione sarà pari alla risoluzione del vostro schermo), ho fatto "incolla" e ho successivamente tagliato una porzione della tabella colorata, ho rifatto "nuovo file - incolla" e ho chiuso (senza salvare), il file "senza_nome_1" (quello corrispondente al vostro schermo).
Quindi, con un solo file aperto (la porzione colorata di tabella) l'ho ingrandita al massimo, guardando di quanti colori fossero i pixel. Primo problema: sono di due colori.
Con lo strumento contagocce ho selezionato il colore più chiaro ma dato che da solo mi sembrava comunque troppo forte per dare la sensazione di opaticità, ho selezionato una sfumatura un po' più chiara (#9A94FB) e il risultato è questo:
il testo, ovviamente, si vede come sempre |
Conviene comunque fare diverse prove di colore; io ho scelto il primo che mi sembrava potesse andare ^_- La seconda soluzione è un pochettino più "complicata" (cioè, non lo è per niente, ma magari per chi non ha assolutamente mai usato dei programmi di grafica, potrebbe apparire più difficile).
Ritorniamo a Photoshop (o al vostro programma di grafica, è la stessa cosa ^^); abbiamo in nostro pezzettino di tabella colorata, ingrandita al massimo. Dobbiamo riuscire a tagliarne un frammento, di modo che se questi venisse ripetuto, non ci sarebbero sfasamenti; in pratica si tratta un po' di occhio e un po' di mente logica, nulla di eccezionale ^_- Esempio della parte che ho tagliato io
vista come ingrandimento massimo
 Ed ecco il risultato del frammento nella stessa tabella di cui sopra ^^ il testo, ovviamente, si vede come sempre |
Come è facile notare, a colpo d'occhio le differenze tra le due opzioni non si notano nemmeno ^^ In pratica la sensazione di "opaco" è data proprio dai contenuti che risultano tali, non tanto dal colore della tabella ^^
esh :: 09/03/2004 15:11
|
|
|
|
=> 
=> 
=> 
