SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    0 Post(s)
    0 Thread(s)

    Question 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 - Secrets behind world events - Researches and analyses - Index

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


  2. #2
    SitePoint Addict
    Join Date
    Nov 2008
    1 Post(s)
    0 Thread(s)
    Well a quick blast at it.

    Code PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <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.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    0 Post(s)
    0 Thread(s)
    Thank you very much RLM! Your solution is great!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts