How to Move Image in HTML ?
You can easily move images in HTML using <marquee> tag. It is used to create scrolling images either from horizontally left to right or right to left, or vertically top to bottom or bottom to top. By default, image found within the <marquee> tag will scroll from right to left.
Syntax:
<marquee> <img src=""> </marquee>
Attributes of <marquee> tag:
- direction: Sets the direction for the scrolling images. The value of this attribute can be left, right, up or down.
- behavior: The behavior tells about how the text scrolls. It can be one of the following values which are alternate, scroll, slide.
Example 1: The following example uses scroll behavior.
HTML
<!DOCTYPE html> <html> <body> <center> <!-- The image has scrolling behavior to left --> <marquee behavior="scroll" direction="left"> <img src= alt="GeeksforGeeks logo"> </marquee> <!-- The image has scrolling behavior to the upper direction. --> <marquee behavior="scroll" direction="up"> <img src= alt="GeeksforGeeks logo"> </marquee> </center> </body> </html> |
Output:
Example 2: The following example uses the alternate behaviour.
HTML
<!DOCTYPE html> <html> <body> <center> <marquee behavior="alternate" direction="left"> <img src= alt="GeeksforGeeks logo"> </marquee> <marquee behavior="alternate" direction="right"> <img src= alt="GeeksforGeeks logo"> </marquee> </center> </body> </html> |
Output:
Please Login to comment...