HTML/JavaScript: How to stop marquee onload, and start on mouseover?

I'm using the following HTML piece of code to scroll text horizontally:

<marquee behavior="scroll" direction="left" onmouseover="this.start();" onmouseout="this.stop();">Go on... hover over me!</marquee>

The issue I have is that once you visit the page, the marquee starts scrolling automatically. What I want to do, is to freeze the marquee until you mouseover.

You could tinker with scrollAmount instead of calling start() and stop(), and just set scrollamount to 0 initially. E.g.

<marquee behavior="scroll" direction="left" scrollamount="0" onmouseover="this.scrollAmount = 6" onmouseout="this.scrollAmount = 0">Go on... hover over me!</marquee>

See http://jsfiddle.net/svt9L/

_{Note that this is a direct answer to your question. However I fully endorse Jon P's answer. There are better solutions available than using the marquee element.}

I'm going to sound condescending here...

Its 2013. The marquee tag is dead. It is browser specific. It is just plain wrong and was a mistake to begin with.

In the modern era of semantic html one should be using html to define content. Visual styling should be applied with CSS and visual effects with CSS supplemented with javascript if required.

See this article for a biref overview of a modern approach.

There are pure CSS3 approaches: http://www.hongkiat.com/blog/css3-animation-advanced-marquee/

and probably best for you: javascript (and jQuery) solutions: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/. Note: the examples in the linked solution use the marquee tag, but you are not limited to using the marquee tag. You can use any valid jquery selector.

<marquee id="myMarquee" behavior="scroll" direction="left" onmouseover="this.start();" onmouseout="this.stop();">Go on... hover over me!</marquee>

<body onload="document.getElementById('myMarquee').stop();">

Try one of these.

<!-- MOVING UP -->
<marquee direction="up" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

<!-- MOVING DOWN -->
<marquee direction="down" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

<!-- MOVING LEFT -->
<marquee direction="left" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

<!-- MOVING RIGHT -->
<marquee direction="right" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

来源：https://stackoverflow.com/questions/15246132/html-javascript-how-to-stop-marquee-onload-and-start-on-mouseover

标签

javascript

html

scroll

mouseover

marquee