|
You can also achieve this with the <marquee> order:
DESCRIPTION
Due to popular demand, here's a tutorial for the marquee code I use in my Xanga for the scrolling skins and the affliates button exchange. Example Notice how the marquee slows down after you've moved your mouse over the items.
CODE
CODE
<marquee scrollAmount= "#" onMouseover="this.scrollAmount=#" onMouseout="this.scrollAmount=#" onMouseDown="this.scrollAmount=#" onMouseUp="this.scrollAmount=#">
text here
</marquee>
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.
CODE EXPLANATION
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. 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.
WRAP UP
Now let's tie this all up. Here is the exact marquee code I used in my Xanga for the vertical scrolling items:
CODE
<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>
I tried to make this as easy to follow as possible and teach you a little javascript along the way. This script is great for link buttons, a picture slide show, whatever you can think of.
That's it! If you have any questions, please post them in.
----------------------------------------------------------------------
|