Pagina aggiornata... Giovedì 01 Gennaio 1970 *
Tempo di caricamento
0.23
secondi
Link navigazione :
Home telaio ೡ Home ~ Tutorial ~ Html » Cursore |
..:: Il cursore ::..
Se vogliamo abbellire le nostre pagine non possiamo assolutamente trascurare "il cursore"
possiamo trasformarlo come e dove vogliamo, semplicemente variando la forma,
sostituirlo con piccole gif o addirittura affiancarlo ad una scritta...
Basterà inserire dei semplici tag, a seconda del cursore che ci serve o ci piace, per avere
quello giusto al posto giusto^^ Iniziamo quindi dalle basi, ovvero i parametri standard
per i cursori nelle pagine web, utilizzati principalmente per evidenziare i link.
# Passate il mouse sopra i nomi dei cursori per vedere l'effetto
default |
crosshair |
move |
hand |
help |
text |
wait |
progress |
pointer |
|
|
|
ne-resize |
sw-resize |
nw-resize |
se-resize |
n-resize |
s-resize |
e-resize |
w-resize |
Con l'arrivo dei nuovi "css.3" abbiamo questi altri parametri,
ma al momento non sono supportati da tutti i browser
copy |
alias |
cell |
no-drop |
all-scroll |
not-allowed |
col-resize |
row-resize |
vertical-text |
- Per personalizzare il cursore su tutta la pagina,
inseriremo l'apposito parametro nello style del body direttamente dai css:
<style type="text/css">
body{cursor: nome cursore;}
</style> |
Ovviamente agendo sui css potremmo stabilire un determinato cursore per vari
parametri della pagina, tipo i link, i titoli, il testo ecc. ecc. aggiungendo appunto allo style
di questi parametri anche lo style del cursore.
- Se preferite, potete inserire lo style del cursore direttamente in linea quando vi occorre,
ad esempio in un paragrafo, un div o in una table:
<p style="cursor:not-allowed">Passa su con il mouse...</p>
<div style="cursor:help">Passa su con il mouse...</div>
<table border="1" width="90%">
<tr>
<td style="cursor:s-resize">Passa su con il mouse...</td>
</tr>
</table> |
|
Cursore e immagini
Se desideriamo personalizzare il cursore con un'immagine dobbiamo utilizzare un tag particolare,
perché è necessario inserire l'url della pagina dell'immagine e immagini con estensioni
diverse affinché si visualizzi con i vari tipi di browser.
Internet Explorer riconosce come parametro valido solo un immagine con estensione .cur,
gli altri browser, Firefox, Chrome, Opera ecc. ecc. non hanno problemi e visualizzano immagini con
estensione gif, png o jpg anche se, ad esempio con Crome si perde l'animazione nelle immagini gif.
- Ecco il tag da inserire nelle pagine, direttamente nel tag <body>
<body style="cursor: url('url_immagine.gif'), url('url_immagine.cur'), default;"> |
Passa qui con il mouse per vedere l'effetto^^ |
Be' direi che è abbastanza semplice e pratico, non ci vuole molto a rinominare una gif in .cur
ed avere così il cursore che vogliamo sulle nostre pagine... e su tutti browser ^_^
Nel menu "Script page" trovate vari modi per personalizzare il cursore in modo
più evidente utilizzando delle magiche stelle o delle scrittine...
Nel telaio trovi tanti mini cursori pronti da usare nelle tue pagine
-->
Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥
ೡ Dai un giudizio a questa guida... Grazie ^_^
|
Voti totali: |
26 |
Rating... |
4.42 |
|
Commentario...
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^
|
I vostri commenti in questa pagina...
- Pagina visitata da 3098 utenti
|
H:
Buon Autunno
e ...buon weekend!
* Info sezione...
Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥
..:: Basi ::..
..:: html ::..
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
..: Spazio web...
Realizzare e gestire un sito web
con l'hosting free più famoso...


Pagina Facebook del telaio... |
 |
|
|