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

    Advertisements


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

    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 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



    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 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



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



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



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



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


    The below 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 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.



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


    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.



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


    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

    BloggerTips
    SEO
    Tricks


    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



    Click for stop(release click for moving)


    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



    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. just look.

    The below 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. 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



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


    The below 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 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.



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


     

    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.



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


    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.



    moving image by marquee html code



    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.


    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. 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:


    Source Code(2.7)Result



    I am Clickable in Marquee



    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.


    moving image by marquee codes




    Share the Love!

    Did You Like This Post? Get the Latest Blogger & SEO Technology Directly From Your Inbox Just Enter Your Email and Verify it!



0 comments:

Leave a Reply