HTML codes, which is used for scrolling the text and images to alternate or slide from left to right, right to left, top to bottom or bottom to top. Marquee HTML codes for text and images are always eyes catching. If you browse to any news media websites or blogs, you may view the sliding text as latest coverage news on the top or the bottom area that directly influenced to the viewer's eyes. You may also use the hyper links to the text or images into the marquee HTML codes. Therefore, here is how to
add scroll, alternate or slide text by marquee codes. Firstly, let us see all the possible attributes for marquee HTML tag that create the special features.
 |
| Move the text & images by marquee codes |
Attributes of Marquee HTML Codes - Tag and Definitions
Firstly, I would like to tell you that what does the mean of an attribute. Let's look at the following HTML code for a hyper link,
<a href="http://www.bloggertipsseotricks.com" rel="dofollow" target="_blank" title="Go To Home Page"> Blogger Tips and Tricks</a>
The Preview of the above code is
Blogger Tips and Tricks.
As shown in the above code, <a> is the anchor HTML tag, and the attributes we are using
href,
rel,
target and
title. All of the attributes have the different properties corresponding to its values (which shown in the blue text), which tells to the browser that what will happen for <a> tag if someone click on that.
Now, in the
Marquee HTML Code Tag that is
<marquee>, the main
attributes are:
- width - Marquee code box width
- height - Marquee code box height
- behavior - Whether to scroll, slide or bounce
- direction - direction of the Marquee Text or Image
- bgcolor - Background color of Marquee code box
- scrolloamount - Speed up or down of Marquee
- onmousedown - Right click on mouse(Action)
- onmouseup - Right click release(Action)
- onmouseover - Mouse hover on marquee(Action)
- onmouseout - Mouse hover away from marquee(Action)
HTML Marquee codes for Slide Text
You may copy the following HTML Marquee codes with your own text or hyperlink to your blog. All the Marquee codes associated with the preview in the second column.
Let you want to slide any text, or in simple word, you want to move your text from one end to the other end, and once your text reach to the other end, stop the motion.
The following code is for slide your text from right to left:
| Source Code(1.1) | Result |
|---|
|
|
As shown in the above code, we have used an attribute called "behavior" with the value "slide" that slide the text from right to left. If you want to slide the text from left to right, then you have to add an additional attribute with the property
direction="right" into the marquee HTML code. If you don't use the "direction" attribute, then your text will slide from right to left by default, and the direction value will always be set to the
left. You can see the following preview for sliding the text from left to right.
The following code is for slide your text from left to right:
| Source Code(1.2) | Result |
|---|
|
|
Now, if you want to slide the text from downside to upside. You need to replace
direction="right" to
direction="up" into your
marquee code as shown in the above source code (1.2). You may specify the height and width of your marquee box by inline style sheet. Take a preview along with the code,
The following code is for slide your text from down to up:
| Source Code(1.3) | Result |
|---|
In this code, you may change the colors of your choice as border color, background color, height and width values.
|
|
Now, if you want to slide your text from upside to the downside. You need to change the value of your attribute
direction from
up to
down i.e.,
direction="down" in the above code (1.3).
The following code is for slide your text from up to down:
| Source Code(1.4) | Result |
|---|
In this code, you can change the colors of your choice as border color, background color, height and width values.
|
|
Marquee HTML Codes for Scrolling Text
You have studied the marquee codes for sliding or moving the text. In this section we will discuss to scroll the text from left to right, right to left, up to down and down to up. You don't need to add anything else in the studied code. Just you have to change the value of
behavior from
slide to
scroll in the source codes 1.1, 1.2, 1.3, 1.4. You can view the
Marquee HTML Codes along with the previews for
scrolling the text in the following ways.
The following code is for scroll your text from right to left:
| Source Code(2.1) | Result |
|---|
|
|
The following code is for scroll your text from left to right:
| Source Code(2.2) | Result |
|---|
|
|
The following code is for scroll your text from down to up:
| Source Code(2.3) | Result |
|---|
In this code, you may change the colors of your choice as border color, background color, height and width values.
|
|
The following code is for scroll your text from up to down:
| Source Code(2.4) | Result |
|---|
In this code, you may change the colors of your choice as border color, background color, height and width values.
|
|
Next: You may also change the speed of your
scrolling marquee text by
scrollamount attribute. Check out the following scrolling marquee texts with different speeds.
The following code is for scrolling your texts from right to left with different speeds:
| Source Code(2.5) | Result |
|---|
|
|
Now, if you wish to stop the motion of your marquee text during the click action, and want to start the movement of your text again when you release the click. In that case, you have to add two additional marquee attributes in your marquee codes. The first attribute will be use to stop the motion of your text, which is
onmousedown with the value
this.stop(); that will be activate when you click on the moving text. The second attribute will be use to start again the motion of your text, which is
onmouseup with value
this.start(); that will be activate when you release the click on the moving text. Here is an example to stop and start the motion of your marquee text by click feature.
The following code is for moving your text, and stop the movement by click on it:
| Source Code(2.6) | Result |
|---|
|
|
Now, if you wish to stop and start the motion of the marquee text by mouse hover property (Just move your arrow or cursor over the marquee text), you need to change the attribute from
onmousedown to
onmouseover, and
onmouseup to
onmouseout in the above Source Code (2.6).
The following code is for stop your text on mouse hover, and move again it by hover away from marquee text:
| Source Code(2.7) | Result |
|---|
|
|
Now, if you wish to generate a button to stop and start the motion of your marquee text, then you need to create two buttons and assign the values to allow the stop and start text motions in that buttons.
The following code is for stop and start your text by clicking on buttons:
Marquee HTML codes for Alternate Text | Moving Text
Now, if you wish to move your text alternatively (means bounce from each corner) then you need to change the
behavior attribute's value from
slide to
alternate in
source code 1.1, 1.2, 1.3, 1.4. You can view the
HTML Alternate Marquee Codes along with the previews.
The following code is for alternate your text from right to left:
| Source Code(3.1) | Result |
|---|
|
|
The following code is for alternate your text from left to right:
| Source Code(3.2) | Result |
|---|
|
|
The following code is for alternate your text from down to up:
| Source Code(3.3) | Result |
|---|
In this code, you may change the colors of your choice as border color, background color, height and width values.
|
|
The following code is for alternate your text from up to down:
| Source Code(3.4) | Result |
|---|
In this code, you may change the colors of your choice as border color, background color, height and width values.
|
|
HTML Marquee Codes for Images - Scrolling, Alternate, Slide
Moving your images by sliding, alternating or scrolling is similar as moving the marquee text. In the above code, replace the text you moved by marquee codes to the
img HTML tag. You can view
moving the images by marquee codes along with the previes in the following way.
The following code is for scroll your image from right to left:
| Source Code(4.1) | Result |
|---|
You may use width and height attribute in the img tag. |
|
Now, if you wish to move the images along with the caption text or the text below to image, you can use the following code,
The following code is for scroll your image with caption text from right to left:
| Source Code(4.2) | Result |
|---|
You may use width and height attribute in the img tag. |
|
How to Use Clickable/Image Links in Marquee HTML Codes
If you wish to move a clickable link or clickable image, then you don't need to know anything. You may use clickable link HTML code or clickable image link between the marquee tags.
Since we want to use the links instead of the text so it is obviously better to add
onmouseover and
onmouseout attributes in the marquee codes to stop the movement when someone want to click on it. Take a preview and grab the code,
The following code is for creating clickable links in Marquee HTML Code:
The following code is for creating clickable image in Marquee HTML Code:
| Source Code(5.2) | Result |
|---|
You may use width and height in img tag. |
|
