Scrollover Links

—What is a Scrollover?—

Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting.

Integration of Scrollovers into your web site couldn’t be easier, even if you’ve already built the site that you want to include Scrollovers on. In just minutes you will be able to have them appearing on your own pages.

A major advantage of Scrollovers being created using standard HTML and Javascript is the option of applying CSS styling, just like you would on any other Hyperlink.

TEST HOVERING HERE

—How do I add it to my pages?—

• Copy the following code into your page right before the </head> tag. (You can download the js file here…)
  <script type=”text/javascript” src=”http://www.YOUR SITE.com/js/scrollovers.js”></script>
• Your links should look similar to the one below
  <a href=”[YOUR PAGE HERE]” class=”scrollover” type=”scrollover”>[YOUR TEXT HERE]</a>
• Make it pretty (see below)

Copy the styling code below into your page or stylesheet

<style>
a.scrollover {
/* Default Colour/Styles here */
color: #557AFF;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #FF5B3C;
}
</style>

—Advanced User Information—

• You can change the scroll speed by editing scrollovers_ScrollSpeed
• If you prefer the links to roll up, set scrollovers_ScrollDownOnMouseOver to false
• To make every link into a Scrollover without having to set the Type attrbiute, set the scrollovers_TypeName variable to an empty string in the javascript
• If you need to Nudge the start position you can use the scrollover_Nudge class.
  a.scrollover .scrollover_Nudge {
  top:-1px;
  }