Fogli di stile CSS consentono di aggiungere interattività, movimento ed il colore per pagine Web statiche. CSS può trasformare normali siti in siti spettacolari, una volta capito come funziona. Ad esempio, se si desidera rendere gli oggetti come immagini spostare nuove posizioni sulla tua pagina Web, si può farlo utilizzando CSS e JavaScript. JavaScript fornisce la logica necessaria per riposizionare le immagini regolando le proprietà CSS.

Istruzioni

1

Avviare un editor di testo o un editor HTML. Incollare il codice riportato di seguito nella sezione body del documento. Non importa dove si inserisce il codice in quella sezione.

< div id = "image1" class = "movimento" >
< img src="dogear.jpg" / >
< / div >

Questo codice HTML crea un elemento div che contiene un'immagine. Sostituire "Nome_immagine" con il nome di un'immagine sul disco rigido o l'URL di un'immagine che esiste su Internet. Notare il riferimento alla classe CSS denominata "movimento" nel codice. Questa classe CSS imposta le proprietà necessarie per rendere le immagini spostare.

2

Aggiungere la seguente riga di codice riportato di seguito il codice illustrato nel passaggio precedente.

< input type = "button" valore = "Sposta immagine" onclick="moveImage('image1','100','200')" / >
Questo codice crea un pulsante. Si utilizzerà questo pulsante per testare il programma. Il pulsante chiama una funzione JavaScript e passa l'id del div contenitore a tale funzione. Passa anche due numeri la funzione. Il primo numero - 100-- rappresenta la posizione in pixel che vorremmo che l'immagine venga visualizzata in relazione al bordo sinistro del browser. Il secondo numero-- 200..--rappresenta la distanza in pixel dall'inizio pagina del browser, dove si desidera visualizzare l'immagine. In questo esempio, questi valori causano l'immagine venga visualizzata 100 pixel dal lato sinistro del browser e 200 pixel dalla parte superiore del browser.

3

Incollare il codice CSS seguente nella sezione head del documento:

< style >
soffro {posizione: absolute; top: 300; sinistra: 400}
< / stile >

Questo codice crea la classe motion CSS. Si noti che il nome "movimento" ha un periodo di fronte ad essa. Valore dell'attributo di posizione è "assoluto". Questo è il valore critico necessario per consentire di spostare gli oggetti intorno al browser. Gli attributi superiore e sinistro rappresentano la posizione iniziale dell'immagine sullo schermo in relazione al bordo superiore del browser e il bordo sinistro. I valori 300 e 400 in questo esempio che il browser visualizzare la tua immagine 300 pixel dalla parte superiore e 400 da sinistra quando la pagina viene aperta.

4

Aggiungere la funzione JavaScript al documento incollando il seguente codice nella sezione script del documento:

Function () {moveImage (immagine, alto, sinistra)
var imageObj = document.getElementById(image);
imageObj.style.top = top;
imageObj.style.left = sinistra;
imageObj.style.zIndex = 500;
}

Questo codice imposta le proprietà di posizione superiore e sinistro del div contenitore che contiene l'immagine. Imposta anche valore di zIndex di div a un numero elevato. Questo indice CSS determina quale pagina elementi appaiono davanti agli altri. Gli elementi con valori elevati appaiono davanti alle immagini con i valori più bassi. Dando div dell'immagine un valore di zIndex alta, è assicurarsi che appare davanti agli altri elementi che potrebbero risultare sovrapposti quando si sposta l'immagine.

5

Salvare il documento e visualizzarlo nel browser. L'immagine viene visualizzata in corrispondenza delle coordinate iniziale specificato nella classe CSS. Fare clic sul pulsante "Sposta immagine". L'immagine si muove alle coordinate che si passa alla funzione JavaScript.

Consigli & Avvertenze

• È inoltre possibile animare un'immagine chiamata alla funzione moveImage ripetutamente e passandolo nuovi valori per top e left ogni volta che chiami tu.
• Prestare attenzione quando si assegnano valori agli attributi superiore e sinistro in classe motion CSS. Gli sviluppatori a volte dimentica di aggiungere le lettere "px" alla fine dei valori che definiscono nella classe.