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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    change text on text mouseover

    Hey, I was now wondering if there is a way to make it so that when a user rolls over text, it will make text somewhere else on the page change. So for example, when a user rolls over “HW: Study” I would like “Default text” to change to “Explanation of assignment” Is it possible to do this with JavaScript or something? Thanks very much for your time.

    Example:

    HW: Study

    Default text
    Last edited by lifeismusic434; 05-30-2006 at 03:20 AM.

  • #2
    New to the CF scene
    Join Date
    Oct 2004
    Location
    sydney, Down Under
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    heres the answer

    it sure is.

    ill give you the code you need.
    here is the js code:
    Code:
    '	Copyright © 2006, All rights reserved.
    '	Date Created: April 2006
    '
    '	Last Modified Date: 17 May 2006
    '	Last Modified By: Christopher -> chris@massmedia.com.au
    '
    '	DO NOT MODIFY THIS DOCUMENT WITHOUT
    '	NOTIFYING THE AUTHOR FIRST
    '
    ------------------------------------------------*/
    /* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.2 ****** */
    /* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.1 ****** */
    var fader = new Array(), fadeQ = new Array();
    var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
    for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j];
    
    function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
      this.number = number;
      this.id = id;
      this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
      this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
      this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
      this.spdIn = spdIn;
      this.spdOut = spdOut;
      this.def = def;
      this.direction = false;
      this.active = false;
      this.message = new Array();
      this.messageNow = 0;
    }
    
    function fadeCmd(number, message, direction) {
      this.number = number;
      this.message = message;
      this.direction = direction;
    }
    
    function fade(number, message, direction) {
      if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
        fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
        fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
        message = 0;
        direction = false;
      } else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
      setTimeout("fadeBegin(" + number + ");", 20);
    }
    
    function fadeBegin(number) {
      for (var x = 0; x < fadeQ.length; x++) {
        for (var y = x + 1; y < fadeQ.length; y++) {
          if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) {
            fadeQ.splice(x, 1);
            fadeQ.splice(y - 1, 1);
          }
        }
      }
      if (!fader[number].active) {
        for (var x = 0; x < fadeQ.length; x++) {
          if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) {
            var del = fadeQ.splice(x, 1);
            setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
            break;
          }
        }
      }
    }
    
    function fadeEng(number, message, direction) {
      if (!fader[number].active) {
        fader[number].active = true;
        fader[number].direction = direction;
        fader[number].messageNow = message;
        document.getElementById(fader[number].id).innerHTML = fader[number].message[message];
      }
      var iniCol = (direction) ? fader[number].colOff : fader[number].colOn;
      var endCol = (direction) ? fader[number].colOn : fader[number].colOff;
      var incCol = fader[number].colNow;
      var spd = (direction) ? fader[number].spdIn : fader[number].spdOut;
      for (var x = 0; x < 3; x++) {
        var incr = (endCol[x] - iniCol[x]) / spd;
        incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]);
      }
      document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])];
      if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) {
        fader[number].active = false;
        for (var x = 0; x < fadeQ.length; x++) {
          if (fadeQ[x].number == number) {
            var del = fadeQ.splice(x, 1);
            setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
            return false;
          }
        }
        if (!direction) {
          if (fader[number].def) {
            setTimeout("fadeEng(" + number + ", 0, true);", 0);
          } else document.getElementById(fader[number].id).innerHTML = "&nbsp;";
        }
      } else setTimeout("fadeEng(" + number + ", " + message + ", " + direction + ");", 0);
    }
    /* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.1 ******** */
    
    fader[0] = new fadeObj(0, 'fade0', 'dddddd', '666666', 20, 20, true);
    fader[0].message[0] = "";
    /* Faded Text that appears for Mass E-Cards */
    fader[0].message[1] = "Fading text for link one description<br />and then there is more text here";
    fader[0].message[2] = "link two descrioption";
    fader[0].message[3] = "And this is link three";
    fader[0].message[4] = "Link four goes here";
    fader[0].message[5] = "i think you get the point";
    fader[0].message[6] = "blah";
    fader[0].message[7] = "blah blah blah";
    fader[0].message[8] = "Flash Games link description here";
    here is the code you will need to put on your page
    Where the text to be rolt over is located:
    Code:
    <div class="classNameHere" onmouseover="fade(0, 1, true);" onmouseout="fade(0, 1, false);"><a href="#" alt="#"/>&nbsp;<div class="arrowRight">&nbsp;</div>&nbsp;&nbsp;TEXT TO BE ROLLING OVER</a></div>
    And Where you want the rollover text to appear.
    Code:
    <div class="classNameHere" id="fade0"></div>
    give your class margins and padding if needed..

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very much, but I'm a little confused. What exactly will that code do? I tried adding it to my page, but unfortunalty, it didn't work. I'm sorry, i'm a bit of a noob.

    Maybe if I explain what I want to do a bit better. Ok, so on this page, you can see how if you mouse over the text for the online databases, the image to the right changes. This is all good, but I would like to make it so that it is text that changes, not an image.

    I am making a calendar page, and I want users to be able to mouse over certain days, and then have some text change below to different text to give a more detailed explaination of the day.

    Maybe I'm just confused, and that is infact what the above code does, but I just wanted to check. Thanks for the fast response.

    [edit] I can post the source code for my page if you need it. Thanks!

  • #4
    New to the CF scene
    Join Date
    Oct 2004
    Location
    sydney, Down Under
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that code will work for what you want. It even has a a faded effect to the text and is compatiable for older browsers too!

    just try and make it work on a dummy page. You will be surprised how easy it is.

    i've only gotten it to work with rolling over text, not an image. But im sure that wouldnt be a problem.

    ----
    so theres three parts you will need.
    one - the js code. (make sure u reference it in ur head tag)
    two - the bit of code where you will be rolling over. and
    three - the code (text) that appears on the mouseover.

  • #5
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, so I'm trying to set up a dummy page, but I can't seem to get it to work. I'm sure I am just missing something really dumb. All I have on the page is the unmodified JS script, and then at the bottom is the other two lines of code, which I added to the <body> tags. Here is my page code:

    Code:
    <html>
    <head>
    <title>Calendar</title>
    
    <script language="javascript">
    
    '	Copyright © 2006, All rights reserved.
    '	Date Created: April 2006
    '
    '	Last Modified Date: 17 May 2006
    '	Last Modified By: Christopher -> chris@massmedia.com.au
    '
    '	DO NOT MODIFY THIS DOCUMENT WITHOUT
    '	NOTIFYING THE AUTHOR FIRST
    '
    ------------------------------------------------*/
    /* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.2 ****** */
    /* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.1 ****** */
    var fader = new Array(), fadeQ = new Array();
    var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
    for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j];
    
    function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
      this.number = number;
      this.id = id;
      this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
      this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
      this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
      this.spdIn = spdIn;
      this.spdOut = spdOut;
      this.def = def;
      this.direction = false;
      this.active = false;
      this.message = new Array();
      this.messageNow = 0;
    }
    
    function fadeCmd(number, message, direction) {
      this.number = number;
      this.message = message;
      this.direction = direction;
    }
    
    function fade(number, message, direction) {
      if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
        fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
        fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
        message = 0;
        direction = false;
      } else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
      setTimeout("fadeBegin(" + number + ");", 20);
    }
    
    function fadeBegin(number) {
      for (var x = 0; x < fadeQ.length; x++) {
        for (var y = x + 1; y < fadeQ.length; y++) {
          if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) {
            fadeQ.splice(x, 1);
            fadeQ.splice(y - 1, 1);
          }
        }
      }
      if (!fader[number].active) {
        for (var x = 0; x < fadeQ.length; x++) {
          if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) {
            var del = fadeQ.splice(x, 1);
            setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
            break;
          }
        }
      }
    }
    
    function fadeEng(number, message, direction) {
      if (!fader[number].active) {
        fader[number].active = true;
        fader[number].direction = direction;
        fader[number].messageNow = message;
        document.getElementById(fader[number].id).innerHTML = fader[number].message[message];
      }
      var iniCol = (direction) ? fader[number].colOff : fader[number].colOn;
      var endCol = (direction) ? fader[number].colOn : fader[number].colOff;
      var incCol = fader[number].colNow;
      var spd = (direction) ? fader[number].spdIn : fader[number].spdOut;
      for (var x = 0; x < 3; x++) {
        var incr = (endCol[x] - iniCol[x]) / spd;
        incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]);
      }
      document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])];
      if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) {
        fader[number].active = false;
        for (var x = 0; x < fadeQ.length; x++) {
          if (fadeQ[x].number == number) {
            var del = fadeQ.splice(x, 1);
            setTimeout("fadeEng(" + number + ", " + del[0].message + ", " + del[0].direction + ");", 0);
            return false;
          }
        }
        if (!direction) {
          if (fader[number].def) {
            setTimeout("fadeEng(" + number + ", 0, true);", 0);
          } else document.getElementById(fader[number].id).innerHTML = "&nbsp;";
        }
      } else setTimeout("fadeEng(" + number + ", " + message + ", " + direction + ");", 0);
    }
    /* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.1 ******** */
    
    fader[0] = new fadeObj(0, 'fade0', 'dddddd', '666666', 20, 20, true);
    fader[0].message[0] = "";
    /* Faded Text that appears for Mass E-Cards */
    fader[0].message[1] = "Fading text for link one description <br/> and then there is more text here";
    fader[0].message[2] = "link two descrioption";
    fader[0].message[3] = "And this is link three";
    fader[0].message[4] = "Link four goes here";
    fader[0].message[5] = "i think you get the point";
    fader[0].message[6] = "blah";
    fader[0].message[7] = "blah blah blah";
    fader[0].message[8] = "Flash Games link description here";
    
    </script>
    </head>
    
    <body>
    
    <div class="fadeClass" onmouseover="fade(0, 1, true);" onmouseout="fade(0, 1, false);"><a href="#" alt="#"/>&nbsp;<div class="arrowRight">&nbsp;</div>Roll Over This Text</a></div>
    
    <div class="fadeClass" id="fade0"></div>
    </body>
    </html>

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <html>
    <head>
    </head>
    <script>
    
    function SwapText(id,txt){
     document.getElementById(id).innerHTML=txt;
    }
    </script>
    <body>
    
    <span onmouseover="SwapText('Test1','REPLACED TEXT');" >Some Text</span>
    <br>
    <br>
    <span id="Test1" >Start Text</span>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks, that is exactly what I was looking for. Now, in order to replace the original text when I mouse out, I do this, right? Is there a way to do it with out having to type out the start text twice? If it's too complicated, don't bother.

    Code:
    <html>
    <head>
    </head>
    <script language="javascript">
    
    function SwapTo(id,txt)
    {
     document.getElementById(id).innerHTML=txt;
    }
    
    function SwapBack (id, txt)
    {
     document.getElementById(id).innerHTML=txt;
    }
    
    </script>
    
    <body>
    
    <span onmouseover="SwapTo('start1','This is the replacement text');" onmouseout="SwapBack('start1','Start Text');" >Mouseover This</span>
    <br>
    <br>
    <span id="start1" >Start Text</span>
    
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    looks OK

    or
    Code:
    <html>
    <head>
    </head>
    <script language="javascript">
    
    function SwapTo(id,txt){
     var zxcobj=document.getElementById(id);
     if (!zxcobj.oldtxt){ zxcobj.oldtxt=zxcobj.innerHTML; }
     zxcobj.innerHTML=txt||zxcobj.oldtxt;
    }
    
    
    </script>
    
    <body>
    
    <span onmouseover="SwapTo('start1','This is the replacement text');" onmouseout="SwapTo('start1');" >Mouseover This</span>
    <br>
    <br>
    <span id="start1" >Start Text</span>
    
    </body>
    </html>
    which means that you can have different replacement text for different links always restoring to Original Text on MouseOut with minimal code
    Last edited by vwphillips; 05-31-2006 at 10:48 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very very much, that works perfectly.


  •  

    Posting Permissions

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