Comment déplacer une image CSS

Les développeurs font passer des images sur la page Web en modifiant les propriétés Cascading Style Sheet de leurs images. Ces propriétés CSS vous permettent de spécifier l'emplacement d'une image par rapport au coin supérieur gauche de l'écran du moniteur. HTML, le langage utilisé pour créer des pages Web, n'a pas de méthodes que vous pouvez utiliser pour repositionner des objets. Vous pouvez cependant utiliser JavaScript et CSS pour déplacer une image à n'importe quel endroit sur votre page Web.




Instructions

1

Ouvrez une page HTML en utilisant votre éditeur HTML ou Notepad.
2

Ajouter une image à la page en insérant le code ci dessous dans la section du corps de la page.

Identifiant

Remplacer "XYZ.gif" avec le chemin de l'image d'une image réelle sur votre disque dur. Si vous préférez tester en utilisant une image sur le Web, remplacer "XYZ.gif» avec l'URL de l'image à la place.
3

Ajouter le code du bouton suivant sous le code indiqué dans l'étape précédente:



Ce bouton vous permet de tester votre code. Lorsque vous cliquez sur le bouton, il passe Identifiant de l'image à une fonction JavaScript nommée "moveImage." Il passe également à 100 et 200. Ce sont l'écran coordonnées x et y définir l'emplacement où vous souhaitez déplacer l'image. Ces valeurs sont en pixels.
4

Ajoutez le code JavaScript suivant ci-dessous le code CSS décrit dans la dernière étape:

Fonction moveImage (ImageID, xLocation, yLocation) {

var imageobject = document.getElementById (ImageID);

imageObject.style.position = "absolue";

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

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

!

Cette fonction déplace l'image, il reçoit l'id de l'image à se déplacer avec l'écran coordonnées x et y décrit dans l'étape précédente.
5

Enregistrez le document et l'afficher dans votre navigateur. Cliquez sur le bouton pour faire bouger l'image.

Conseils et avertissements

Déplacer autres images en appelant le "moveImage" la fonction, et en lui passant l'id de l'image que vous souhaitez déplacer. La fonction se déplace n'importe quel objet qui lui est passé. Testez votre code avant de le déplacer sur votre serveur Web. Ne laissez pas les coordonnées x et y que vous passez la fonction déplacez votre image hors de l'écran à l'endroit où les visiteurs du site ne peut pas le voir. Cela peut arriver si vous faites les valeurs de "xLocation" et "yLocation" trop grand.