#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Brooklyn, NY
    Posts
    9
    Rep Power
    0

    CSS text rollovers (change the word on rollover)


    I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Milton Keynes, UK
    Posts
    35
    Rep Power
    12
    Place the text you want in the span section of the page and use IDs and event handlers for functions:
    Code:
    <span class='mouse_out' id='changeable_text' onMouseOver='show_text()' onMouseOut='hide_text()'>A</span>
    Then you need the functions and styles defined in the head of the page:
    Code:
    <style type='text/css'>
    <!--
    
    .mouse_over {color: #000000;}
    .mouse_out {color: #FF0000;}
    
    -->
    </style>
    
    <script language='javascript' type='text/javascript'>
    <!--
    
    function show_text() {
      changeable_text.innerText = 'About';
      changeable_text.className = 'mouse_over';
    }
    
    function hide_text() {
      changeable_text.innerText = 'A';
      changeable_text.className = 'mouse_out';
    }
    
    -->
    </script>
    You can also add a style='cursor: hand' attribute to the span tag if you want it to look like a link... Hope that helps, it works in IE6 anyway.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Brooklyn, NY
    Posts
    9
    Rep Power
    0
    Thanks! But I am having trouble using this script for changing more than one word on the page. How would I go about implementing this for multiple links?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Milton Keynes, UK
    Posts
    35
    Rep Power
    12
    It depends on if you want exactly the same thing to happen, or if you want different text/ different coloured text displayed. If you wanted it the same, just repeat for all the links, if you wanted it for different text and CSS you could pass variables through the parentheses in the function:

    Code:
    <style type='text/css'>
    <!--
    
    .mouse_over {color: #000000;}
    .mouse_out {color: #FF0000;}
    
    -->
    </style>
    
    <script language='javascript' type='text/javascript'>
    <!--
    
    function show_text(text_value_over, css_class_over) {
      changeable_text.innerText = text_value_over;
      changeable_text.className = css_class_over;
    }
    
    function hide_text(text_value_out, css_class_out) {
      changeable_text.innerText = text_value_out;
      changeable_text.className = css_class_out;
    }
    
    -->
    </script>
    Then in the body add:

    Code:
    <span class='mouse_out' id='changeable_text' onMouseOver='show_text("About", "mouse_over")' onMouseOut='hide_text("A","mouse_out")'>A</span>
    I haven't got time to test that right now, but as far as I can see that should work, then you can create different classes for different links and use them...

IMN logo majestic logo threadwatch logo seochat tools logo