Mimic rollover onload


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.

In case you want to have an idea of the situation, the website is Court Fool.info - Secrets behind world events - Researches and analyses - Index

My knowledge in Javascript is very limited. Can someone help me with this? Thanks in advance.


Well a quick blast at it.

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type = 'text/css'>
body {font: normal 1em verdana;}

ul { 
  float: left;
  list-style: none; 

li { 
  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;
<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>

<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; 
  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


Save button image as ‘button.jpg’ to match the css rule.

Thank you very much RLM! Your solution is great!