How to Make My Pictures Scroll on My Website
Submitted by Vlatko Kalashnikov
In The Beginning
http, www, icon, web, website image by creative from <a href="http://www.fotolia.com">Fotolia.com</a>
To create scrolling pictures on a website, you must use HTML's marquee tag. Marquee tags allow for anything placed between them to scroll in a set direction. The default scrolling direction is right to left, but this can be changed by using different elements of the marquee tag. You should have a basic understanding of coding images in HTML.
The Main Steps
Locate the HTML code of the image that you want to scroll across your page. Here is an example: <img src="http://www.example.com/image.jpg">
Wrap the image code with the starting and closing marquee tags. Add <marquee> before the start of the image code and add </marquee> at the end of the image code. Add both of these tags outside of the image code. Here is an example: <marquee><img src="http://www.example.com/image.jpg"></marquee>
Add the direction element inside of the starting marquee tag. The different directions that it can scroll are: left, right, up, and down. Here is an example of an image that will scroll up on the page: <marquee direction="up"><img src="http://www.example.com/image.jpg"></marquee>
Add the behavior element inside of the starting marquee tag. The different behaviors include: "scroll" (its default behavior), "slide" (the image scrolls in and stops at the end), and "alternate" (the image bounces back and forth across the page). Here is an example: <marquee behavior="alternate"><img src="http://www.example.com/image.jpg"></marquee>
Add the scroll-amount element inside of the starting marquee tag. This element determines the speed of the scrolling image. The default value is 6, but it can be changed to scroll slower or faster by reducing or increasing the speed integer. Here are two examples: Slower Scrolling Image <marquee scrollamount="1"><img src="http://www.example.com/image.jpg"></marquee> Faster Scrolling Image <marquee scrollamount="15"><img src="http://www.example.com/image.jpg"></marquee>

TIPS & WARNINGS

  • You may combine elements inside of the starting marquee tag to create a combination of scrolling effects.
  • Always close your marquee tags with &lt;/marquee&gt;, otherwise anything after the &lt;marquee&gt; tag will scroll across the page as well.
3 out of 3 Found this article helpful
Was this article helpful to you ?YES|NO