Posted by Luke Anderson in Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expecting. Scrollovers are a nice touch, but not everybody knows about it. In this tutorial, I will tell you how to get it, how to implement it, and how to use it. Read more to find out how.
**Before we start, please note that this script does NOT work in Safari 4**
Step 1
Download the script by clicking this link (right-click and save target as).
Step 2
Now, we have to add in the code to the page. Let's say we're adding the code to Amazing Coder's homepage: (the Scrollovers code is in bold).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Amazing Coder</title> <meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats --> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://amazingcoder.com/feed/" /> <link rel="alternate" type="text/xml" title="RSS .92" href="http://amazingcoder.com/feed/rss/" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://amazingcoder.com/feed/atom/" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://amazingcoder.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://amazingcoder.com/wp-includes/wlwmanifest.xml" /> <script type="text/javascript src="http://amazingcoder.com/wp-content/themes/amazingcoder/scrollovers.js"></script> </head>
We'll also need to add in the CSS after the <head> tag:
<style>
a.scrollover {
/* Default Colour/Styles here */
color: #0C3;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #F93;
}
<style>
Step 3
Now we have to add it to one of our links. I've just created an example page, to display them. This is some code extracted from the page:
<a href="#" class="scrollover" type="scrollover">Example Link 1</a>
You can view the live demo here: http://lpanderson.net/tutorial1/
Luke loves his scrolling text links whenever he re-designs his sites, lol. Good to know how to do this if ever I need it.