23 users online (0 members and 23 guests)  


  Results 1 to 4 of 4

Related

  1. Help with text colors    Forum: Myspace Forum
    Replies: 0
  2. Mouseover with multiple changes    Forum: Javascript Forum
    Replies: 3
  3. Change to multiple mouseover help!    Forum: Javascript Forum
    Replies: 1
  4. Replies: 2
  1. #1
    TrickyFingers's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Location
    Paris
    Posts
    4

    Red face Mouseover Text Color Changes in Multiple Colors

    Hi Everyone!

    I'm searching for a script that will allow mouseover text color changes for MULTIPLE colors...for example: my menu consists of ten different items (pure text items...no menu bar or anything). I would like for the first text item to change to a pink text on mouseover; the second text item to change to blue text on mouseover; the third to gold text on mouseover...and so on.

    Any code suggestions that will allow me to accomplish this as efficiently as possible?

    Thanks all!

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Mouseover Text Color Changes in Multiple Colors

    Hi there TrickyFingers,

    bonjour and a warm welcome to these forums.

    Have a look at this example, it may suit your requirements...
    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">
    
    <style type="text/css">
    #container {
        width:720px;
        padding:20px;
        border:3px double #999;
        margin:auto;
     }
    #container p {
        margin:0;
        padding:5px 0;
        text-align:justify;
     }
    </style>
    
    <script type="text/javascript">
    
    /************************ change these values to suit your needs ************************/
    
       var colors= ['#c00','#0c0','#00c','#cc0','#0cc','#c0c','#600','#060','#006','#660'];
    
    /****************************************************************************************/
    
    window.onload=function() {
       par=document.getElementById('container').getElementsByTagName('p');
    for(c=0;c<par.length;c++) {
       par[c].id=c;
    par[c].onmouseover=function(){
       highlightText(this);
       }
      }
     }
    function highlightText(el) {
       el.style.color=colors[el.id];
    el.onmouseout=function(){
       this.style.color='';
       }
      }
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
    adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
    libero. 
    </p><p>
    Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
    cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, orci. 
    Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum augue non purus. 
    Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet interdum eros. 
    </p><p>
    Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque lobortis eleifend elit. Sed eu augue sed felis 
    vulputate iaculis. Cras lorem felis, lobortis id, accumsan vel, facilisis quis, dolor. Curabitur 
    aliquet. Nulla facilisi. Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa.
    </p><p> 
    Maecenas elementum volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, 
    nulla. Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque penatibus et 
    magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat quis ante. Suspendisse 
    eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin diam. 
    </p><p>
    Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin scelerisque. Mauris viverra hendrerit 
    augue. Morbi eu sapien sed enim rutrum blandit. Quisque feugiat. Pellentesque luctus sagittis est. 
    Donec dolor sem, bibendum ac, porta in, rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis 
    at, tincidunt ac, sem.
    </p><p>
    Cras dictum semper ante. Vivamus fermentum, neque non commodo congue, lacus lectus elementum elit, 
    vitae placerat nisl nibh vitae tortor. In molestie fermentum tellus. Nunc dolor quam, venenatis vel, 
    gravida sit amet, imperdiet sit amet, mi. Nulla facilisi. 
    </p><p>
    Nunc pede orci, elementum eget, facilisis id, viverra vel, leo. Duis eu mauris eget felis lobortis iaculis. Etiam elit metus, posuere ut, tempor 
    eget, commodo eget, leo. Vivamus elementum. Quisque fringilla orci sit amet nulla.
    </p><p>
    Praesent ut magna ut nibh porttitor vestibulum. Donec ac mauris sit amet elit egestas condimentum. Duis 
    varius euismod orci. Proin sapien turpis, posuere vitae, tincidunt at, iaculis mattis, magna. Proin 
    rutrum euismod metus. Maecenas ut ante. Pellentesque tincidunt. 
    </p>
    </div>
    
    </body>
    </html>

  3. #3
    TrickyFingers's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Location
    Paris
    Posts
    4

    Re: Mouseover Text Color Changes in Multiple Colors

    Thank you very much for you help! I really appreciate it!

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Mouseover Text Color Changes in Multiple Colors

    No problem, you're welcome.



Tags for this Thread