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>
