Gli sviluppatori di muovere immagini pagina Web modificando le proprietà del foglio di stile CSS delle loro immagini. Queste proprietà CSS consentono di specificare la posizione di un'immagine in relazione all'angolo superiore sinistro dello schermo del monitor. HTML, il linguaggio utilizzato per creare pagine Web, non ha metodi che è possibile utilizzare per riposizionare gli oggetti. È tuttavia possibile, utilizzare JavaScript e CSS per spostare un'immagine in qualsiasi posizione sulla tua pagina Web.

Istruzioni

1

Aprire una pagina HTML utilizzando l'editor HTML o blocco note.

2

Aggiungere un'immagine alla pagina inserendo il codice riportato di seguito nella sezione body della pagina.

< img id = "button1" / >

Sostituire "XYZ.gif" con il percorso dell'immagine di un'immagine reale sul disco rigido. Se si preferisce testare usando un'immagine sul Web, sostituire "XYZ.gif" con l'URL dell'immagine invece.

3

Aggiungere il codice seguente pulsante sotto il codice illustrato nel passaggio precedente:

< input type = valore "pulsante" = "Sposta immagine" onclick = "return moveImage('button1','100','200')" / >

Questo pulsante consente di testare il codice. Quando si sceglie il pulsante, passa Identificativo dell'immagine di una funzione JavaScript denominata "moveImage." Passa anche 100 e 200. Queste sono la x e y dello schermo coordina definisce la posizione in cui si desidera spostare l'immagine. Questi valori sono in pixel.

4

Aggiungere il seguente codice JavaScript sotto il codice CSS descritto nell'ultimo passaggio:

Function moveImage (imageID, xLocation, yLocation) {

var imageObject = document.getElementById(imageID);

imageObject.style.position = "assoluto";

imageObject.style.top = yLocation + "px";

imageObject.style.left = xLocation + "px";

}

Questa funzione sposta l'immagine; riceve l'id dell'immagine di spostarsi insieme x e y coordinate descritte nel passaggio precedente dello schermo.

5

Salvare il documento e visualizzarlo nel browser. Fare clic sul pulsante per rendere l'immagine spostare.

Consigli & Avvertenze

• Spostare altre immagini chiamando la funzione "moveImage" e passando l'id dell'immagine che si desidera spostare. La funzione sposta qualsiasi oggetto passato. Testare il codice prima di spostarlo sul vostro server Web. Non lasciate che la x e y coordinate si passa la funzione di spostare l'immagine fuori dallo schermo dove i visitatori del sito non possono vederlo. Ciò può accadere se si fanno i valori di "xLocation" e "yLocation" troppo grande.