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 eyes catching. If you browse to any news media websites or blogs, you may see the sliding text on the latest coverage news at the top or the bottom area that directly influenced to the viewer's eyes. You may use the
hyper links or clickable links and
clickable or unclickable 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 below HTML code for a hyper link,
<a href="http://www.bloggertipsseotricks.com" rel="dofollow" target="_blank" title="Go To Home Page"> Blogger Guide</a>
The Preview of the above code is
Blogger Guide.
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
Now, below are the previews along with the codes, which you can copy and paste to your posts.
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 below 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 below preview for sliding the text from left to right.
The below 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 below 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 as
down i.e.,
direction="down" in the above code (1.3).
The below 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. Below are the
Marquee HTML Codes along with the previews for
scrolling the text.
The below code is for scroll your text from right to left:
| Source Code(2.1) | Result |
|---|
|
|
The below code is for scroll your text from left to right:
| Source Code(2.2) | Result |
|---|
|
|
The below 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 below 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.
|
|
You may change the speed of your
scrolling marquee text by
scrollamount attribute. Check out the below scrolling marquee texts with different speeds.
The below code is for scrolling your texts from right to left with different speeds:
| Source Code(2.5) | Result |
|---|
|
|
Now, if you wish to vanish the motion of your marquee text during the click, and want to start the movement of your text 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 below 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 hover property, just you need to change the attribute from
onmousedown to
onmouseover, and
onmouseup to
onmouseout in the above Source Code (2.6). Below is a preview along with the code.
The below code is for stop your text on mouse hover, and move again 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. just look.
The below 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. Below are the codes along with the previews of
HTML Alternate Marquee Codes,
The below code is for alternate your text from right to left:
| Source Code(3.1) | Result |
|---|
|
|
The below code is for alternate your text from left to right:
| Source Code(3.2) | Result |
|---|
|
|
The below 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 below 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 slide, alternate or scroll is similar as moving the marquee text. In the above code, replace the text you moved by marquee codes to the
img HTML tag. Below is the code with the preview for
moving the images by marquee codes.
The below 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 with some text below that image then you can use the below code,
The below code is for scroll your image with 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. 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 better to add
onmouseover and
onmouseout attributes in the marquee codes so that if the cursor are on the clickable text that stop the movement, and if your cursor are away from the clickable text, which start the movement automatically. Take a preview and grab the code,
The below code is for creating clickable links in Marquee HTML Code:
The below code is for creating clickable image in Marquee HTML Code:
| Source Code(2.7) | Result |
|---|
You may use width and height in img tag. |
|
0 comments: