I would like to draw the visitors’ attention to a range of language buttons on my web pages. Visitors can choose among 8 languages to read the articles on my website. As this is not common, visitors don’t expect it and a number of them don’t notice these language buttons at all.
To draw the visitors attention to these buttons, I would like to mimic a rollover effect on them when the page loads. For instance, from left to right each button would be highlighted during a quarter of a second.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type = 'text/css'>
body {font: normal 1em verdana;}
ul {
float: left;
list-style: none;
}
li {
float:left;
margin-left: 1px;
}
li a {
text-decoration: none;
text-align: center;
font-size: 0.8em;
line-height: 23px;
color: black;
display: block;
width: 100px;
height: 25px;
background: url('button.jpg') top left no-repeat;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
li a:hover, li a.hover {
font-weight: bold;
background-position: bottom left;
}
</style>
</head>
<body>
<ul id = 'nav' >
<li><a href = '#'>Bulgarian</a></li>
<li><a href = '#'>English</a></li>
<li><a href = '#'>Spanish</a></li>
<li><a href = '#'>French</a></li>
<li><a href = '#'>Italian</a></li>
<li><a href = '#'>Dutch</a></li>
<li><a href = '#'>Portugese</a></li>
<li><a href = '#'>Russian</a></li>
</ul>
<script type = 'text/javascript'>
var nav = document.getElementById('nav').getElementsByTagName('a'), // find the element with id of 'nav' then all the anchor elements under it
len = nav.length,
timer = null,
match = /\\bhover\\b/, // used to match our 'hover' classname. \\b just means word boundary.
fin = false, // a flag to set when all nav's have been highlighted.
on = 0, off = len-1;
var highLiteNav = function(){
var curr = nav[on], last = nav[off];
if(fin == true) { // if fin is true (The End) then remove highlight from last button, clear timer and return
last.className = last.className.replace(match, '');
clearInterval(timer); timer = null;
return;
}
else if(!(match.test(curr.className))) { // if current button doesn't have the hover class
curr.className += ' hover'; // add a hover class to the current button
last.className = last.className.replace(match, ''); // strip the hover class from the last button
}
on = (on + 1) % len; off = (off + 1) % len;
if (on == 0) { fin = true; } // we're back to the begining again. set the flag.
}
// setInterval triggers the timer
window.onload = function(){ timer = setInterval(highLiteNav, 500); }; // ever 1/2 second
</script>
</body>
</html>
Save button image as ‘button.jpg’ to match the css rule.