• Register
190 points
5

In this tutorial, we will learn how to create a Marquee that scrolls some content and we will also push it when the user hovers over it. So if you are a web development enthusiast then it will help you.

Table of Content:

  • What is Marquee Tag?
  • What is Mouseover?
  • How can we stop running text lines?

What is Marquee Tag?

In the Html, the marquee tag allows us to scroll a piece of running text or image displayed. It can be horizontally or vertically.

Syntax:

<marquee> Text </marquee>

As you can see above it is Marquee tag syntax and It has different types of attributes properties, So we will know all its properties.

Direction Value:

Direction = “up”

Direction = “down”

Direction = “right”

Direction = “left”

Behavior Value: 

Scroll, slide, alternate

It was all about Marquee tag but now, we are going to discuss Pause Marquee running text or content.

We need it to pause and run when the user hovers out it(onMouseOut). So here we will use a javascript function.

There are two methods in javascript 

Onmouseover = “stop()” - it is used to stop marquee line in html 

Onmouseover = “start()” - It is used for run marquee line

Syntax with behavioral and direction:

<!DOCTYPE html>

<html>

<head>

<title>Marquee Tag</title>



</head>

<body>

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">

    Go on... Kodlogs....Kodlogs..!!!

</marquee>

</body>

</html>