HTML Marquee Codes

A Marquee creates a scrolling display. You can add text, images or a combination of both, to each marquee. You can also change the 'behavior' or 'direction' of your slideshow to left, right, up, down, bounce, etc.

* PLEASE NOTE - If you're using Photobucket for your Avon website you must substitute your own information in place of mine. Just insert your Photobucket DIRECT LINK (second code - as shown in the photo below) in place of my blue text.


For example - Look closely at the code below. Everything in BLUE will be replaced with YOUR Photobucket code.

<img src="your filename.gif (or.jpg)">


This is what your code should look like after you have replaced my blue text with your Photobucket code -

<img src="http://i67.photobucket.com/albums/h292/carvia/emmitt_02.jpg">




You can add as many photos as you like to your Marquee Slide Show. Take a look at the code below -

<marquee direction="left">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>

I have 3 photos in my slideshow. To add more I will simply copy and paste this part of the code -


<img src="your filename.gif (or.jpg)">


And add it into my Marquee Code. Like this -

<marquee direction="left">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>


I now have four photographs in my slideshow. That was easy, wasn't it? Let's move on to the codes.


I scroll to the left.

<marquee direction="left">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>


I scroll to the right.

<marquee direction="right">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>

I scroll up.

<marquee direction="up">
<center>
<br>
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
</center>
</marquee>

I scroll down.

<marquee direction="down">
<center>
<br>
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
</center>
</marquee>

I scroll right AND left.

<marquee direction="right"><img src="your filename.gif (or.jpg)"></marquee>
<marquee direction="left"><img src="your filename.gif (or.jpg)"></marquee>
<marquee direction="right"><img src="your filename.gif (or.jpg)"></marquee>
<marquee direction="left"><img src="your filename.gif (or.jpg)"></marquee>
</marquee>

My 'behavior' is alternate.

<marquee behavior="alternate">
<marquee width="200">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>
</marquee>

I Zigzag

<marquee behavior="alternate" direction="up" height="400px">
<marquee direction="right">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>
</marquee>

I'm all over the place!

<marquee behavior="alternate" direction="up" height="400px">
<marquee direction="right" behavior="alternate">
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
<br>
<img src="your filename.gif (or.jpg)">
<img src="your filename.gif (or.jpg)">
</marquee>
</marquee>