Help - Search - Members - Calendar
Full Version: Marquee: Slow on mouseover
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
xquizit
Due to popular demand, here's a tutorial for the marquee code I use in my Xanga for the scrolling skins. Example Notice how the marquee slows down after you've moved your mouse over the items.

CODE
<!-- begin code provided by createblog.com -->
<marquee scrollAmount= "#" onMouseover="this.scrollAmount=#" onMouseout="this.scrollAmount=#" onMouseDown="this.scrollAmount=#" onMouseUp="this.scrollAmount=#">
text here
</marquee>
<!-- end code provided by createblog.com -->


Just replace the # signs with numbers and "text here" with your choice of text or images. The scrollAmount property determines the speed of the marquee The lower the number, the slower the speed. I suggest you keep these values between 1 and 10.


To explain further, we start off with a <marquee> tag. Now let me explain the attributes:

scrollAmount="#"
Sets the (initial) speed of the marquee.

onMouseover="this.scrollAmount=#"
Sets the speed of the marquee for when you move the mouse over the marquee. Ideally, we want to set this to a lower number if we want it to slow down on mouseover.

onMouseout="this.scrollAmount=#"
Sets the speed of the marquee for when you move the mouse out of the marquee. You may want to set this value to the initial speed so that it goes back to its normal speed after the user has moved the mouse off of it.

onMouseDown="this.scrollAmount=#"
Sets the speed of the marquee for when you click down the mouse while it is inside the marquee. It may be ideal to set this to the same value you used for onMouseover.

onMouseUp="this.scrollAmount=#"
Sets the speed of the marquee for when release click of the mouse while it is inside the marquee.


If you've added the code, you'll notice that this marquee moves horizontally rather than vertically like the one on my Xanga. To make it move vertically, just add the following attributes inside the opening marquee tag.

direction="up"
This will tell your marquee to move from bottom to top instead of horizontally. You can also use the values: "down", "right", or "left".

height="#"
This will restrict your vertically scrolling marquee to a specified height.

width="#"
Use the width attribute to restrict it to a specified width if you're using a horizonally scrolling marquee.


Now let's tie this all up. Here is the exact marquee code I used in my Xanga for the vertical scrolling items:
CODE
<!-- begin code provided by createblog.com -->
<marquee direction="up" height="230" scrollAmount="5" onMouseOver="this.scrollAmount=1" onMouseOut="this.scrollAmount=5" onMouseDown="this.scrollAmount=1" onMouseUp="this.scrollAmount=1">
Skin images go here
</marquee>
<!-- end code provided by createblog.com -->


I tried to make this as easy to follow as possible and teach you a little javascript along the way. Hope you guys enjoy this script.
angel-roh
o wow nice tutorial roxanne^^ it's a reallie good one cus i didnt reallie understand some of it but u knew it wow O_O
Fireshrieker
javascript is so haaarrrrdddd.....x_X nice tutorial though
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.