SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    link.onmouseover = function() { this.style.color=rand;}

    When the mouse pointer moves over a specified link a second time, color don't change.
    I want it changes. How can I do? Thanks...
    Code:
      
    <script type="text/javascript">
    var renk=["blue","pink","red","yellow","aqua","green","turquoise","coral","maroon","navy"];
    window.onload =function() {
    
    var rand = renk[Math.floor(Math.random()*renk.length)];
    var rand1 = renk[Math.floor(Math.random()*renk.length)];
    var rand2 = renk[Math.floor(Math.random()*renk.length)];
    // alert(rastgele);
    var el = document.getElementById('div0'); 
    var link, i= 0; 
    while(link = el.getElementsByTagName('a')[i++]) {
    link.onmouseover = function() { this.style.color=rand;} 
    link.onmouseout = function() { this.style.color=rand;} 
    } 
    var el1 = document.getElementById('div1'); 
    var link1, n= 0; 
    while(link1 = el1.getElementsByTagName('a')[n++]) {
    link1.onmouseover = function() { this.style.color=rand1;} 
    link1.onmouseout = function() { this.style.color=rand1;} 
    } 
    var el2 = document.getElementById('div2'); 
    var link2, s= 0; 
    while(link2 = el2.getElementsByTagName('a')[s++]) {
    link2.onmouseover = function() { this.style.color=rand2;} 
    link2.onmouseout = function() { this.style.color=rand2;} 
    } 
    
    }
    </script>
    <style type="text/css">
     #div0 a{ color:blue;} 
     #div1 a{ color:deeppink;} 
     #div2 a{ color:yellow;} 
    </style>
    <body>
    <div id="div0">
    <a href="" >link 1</a>
    <a href="" >link 2</a>
    <a href="" >link 3</a>
    </div>
    <div id="div1">
    <a href="" >link 1</a>
    <a href="" >link 2</a>
    <a href="" >link 3</a>
    </div>
    <div id="div2">
    <a href="" >link 1</a>
    <a href="" >link 2</a>
    <a href="" >link 3</a>
    </div>
    </body>
    Last edited by muazzez; Apr 17, 2007 at 13:36.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by muazzez View Post
    var rand = renk[Math.floor(Math.random()*renk.length)];
    .
    .
    link.onmouseover = function() { this.style.color=rand;}
    rand is a randomly-selected string whose value does not change thereafter. Do something in the mouseover handler to make it change.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Call the mouseover function in div's onmouseover event for all div.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Else execute this line before closing the function

    Code:
    window.setTimeout("window.onload();", 1000);

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ali and Vijiruba,
    Thanks... Now, it is working as I wanted.
    Code:
    window.onload =function changeColor() {
    ...
    link.onmouseover = function() { this.style.color=rand; changeColor() } 
    ...
    link1.onmouseover = function() { this.style.color=rand1;changeColor()} 
    ...
    link2.onmouseover = function() { this.style.color=rand2;changeColor()}
    or
    Code:
    window.onload =function() {
    ...
    link.onmouseover = function() { this.style.color=renk[Math.floor(Math.random()*renk.length)];} 
    link.onmouseout = function() { this.style.color=renk[Math.floor(Math.random()*renk.length)];} 
    ...
    link1.onmouseover = function() { this.style.color=renk[Math.floor(Math.random()*renk.length)];} 
    link1.onmouseout = function() { this.style.color=renk[Math.floor(Math.random()*renk.length)];} 
    ...
    link2.onmouseover = function() { this.style.color=renk[Math.floor(Math.random()*renk.length)];} 
    link2.onmouseout = function() { this.style.color=renk[Math.floor(Math.random()*renk.length)];} 
    ...
    or
    Code:
    ...
    } 
    window.setTimeout("window.onload();", 1000);
    }
    </script>


Bookmarks

Posting Permissions

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