Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change text on mouseover

    Im new to this forum and was wondering if anyone would mind helping me out.

    Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english.

    heres the code

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <style type="text/css">
    .hide {
    display:none;
    }
    .show {
    display:inline;
    }
    </style>

    <script type="text/javascript">
    if(window.addEventListener){
    window.addEventListener('load',showlinks,false);
    }
    else {
    if(window.attachEvent){
    window.attachEvent('onload',showlinks);
    }
    }

    function showlinks() {

    lis=document.getElementById('nav').getElementsByTagName('li');

    for(c=0;c<lis.length;c++){

    lis[c].onmouseover=function() {
    this.getElementsByTagName('span')[0].className='hide';
    this.getElementsByTagName('span')[1].className='show';
    }

    lis[c].onmouseout=function() {
    this.getElementsByTagName('span')[0].className='show';
    this.getElementsByTagName('span')[1].className='hide';
    }
    }
    }
    </script>

    </head>
    <body>

    <ul id="nav">
    <li>
    <span>[Closed]</span>
    <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span>
    </li><li>
    <span>[Closed]</span>
    <span class="hide"><a href="http://www.google.com/">google.com</a></span>
    </li><li>
    <span>[Closed]</span>
    <span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span>
    </li><li>
    <span>[Closed]</span>
    <span class="hide"><a href="http://w3c.org/">w3c.org</a></span>
    </li>
    </ul>

    </body>
    </html>
    </code>

    As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I'm not quite clear what you are asking. The code example you provided simply hides the wording of a link until you mouse-over it. The only span ID's are "show" and "hide" because that's really all this script does. It has nothing to do with translation.

    Are you saying that you have already translated the website into the multiple languages and simply want to use this type of script as an interactive navigation to direct users to the correct version of the site (based on their language selection)? For example: You could display an image of each country's flag by default and then the actual name of the language would appear when they mouse-over it.

    I'm not sure what it is that you want to modify (besides the links) so they point to the correct area of your site. Can you please clarify what it is that you need?

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,142
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. The word CODE is in capitals. You can (and should) edit your previous ost.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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