Marquee HTML Codes | Move Text/Images by Slide/Alternate/Scroll

Description: To Add Marquee HTML Codes for scrolling text/Moving Text. Move Images by scroll/alternate/scroll via Marquee codes.

Advertisement
MarqueeHTML 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.

how to move text and images in marquee codes
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



Your marquee HTML Code (slide-in) text goes here


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



Your marquee HTML Code (slide-in) text goes here


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.



Your marquee HTML Code (slide-in) text goes here


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.



Your marquee HTML Code (slide-in) text goes here


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



Your marquee HTML Code (slide-in) text goes here


The following code is for scroll your text from left to right:


Source Code(2.2)Result



Your marquee HTML Code (slide-in) text goes here


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.



Your marquee HTML Code (slide-in) text goes here


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.



Your marquee HTML Code (slide-in) text goes here


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

BloggerTips
SEO
Tricks


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



Click for stop(release click for moving)


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



Hover for stop(Hover away for moving)


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:


Source Code(2.8)Result



Press Button.... for Start or Stop!


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



Your marquee HTML Code (slide-in) text goes here


The following code is for alternate your text from left to right:

 
Source Code(3.2)Result



Your marquee HTML Code (slide-in) text goes here


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.



Your marquee HTML Code (slide-in) text goes here


 

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.



Your marquee HTML Code (slide-in) text goes here


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.



moving image by marquee html code



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.


moving text by marquee html code
Image Marquee Code



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:


Source Code(5.1)Result



I am Clickable in Marquee



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.


moving image by marquee codes



Like Us on Social Media
Share this article
Copyright © 2015 BloggerTipsSEOTricks.com • All Rights Reserved.
Powered by Blogger
back to top