CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Felix
Felix

Reputation: 1583

Randomize logo color and change CSS link color accordingly

This function randomizes the logo of the site. I'm trying to make a conditional statement that changes the a:hover color accordingly.

If the blue color is chosen the a:hover, .current-menu-item should have color: blue;.

What is the best way of implementing this?

function logoChange() { 
var description = new Array ();
description[0] = "images/logos/blue.png";
description[1] = "images/logos/green.png";
description[2] = "images/logos/orange.png";
description[3] = "images/logos/purple.png";
description[4] = "images/logos/red.png";
description[5] = "images/logos/yellow.png";
var size = description.length
var x = Math.floor(size*Math.random())
document.getElementById('logo').src=description[x];    
}
window.onload=logoChange;


if (logo blue is chosen)
  {
  <style>a:hover, .current-menu-item {color: blue;}</style>
  }

elseif (logo green is chosen)
  {
  <style>a:hover, .current-menu-item {color: green;}</style>
  }

and so on...

Upvotes: 1

Views: 393

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

What I did was created an array of all the possible colors that it can be. Notice how the index of the colors matches the index of the description. So if the variable x turns out to be 3, then purple.png will be the logo, and purple will be thecolor purple for the css.

function logoChange() { 
var description = new Array ();
description[0] = "images/logos/blue.png";
description[1] = "images/logos/green.png";
description[2] = "images/logos/orange.png";
description[3] = "images/logos/purple.png";
description[4] = "images/logos/red.png";
description[5] = "images/logos/yellow.png";
var size = description.length;
var x = Math.floor(size*Math.random());
document.getElementById('logo').src=description[x];

var colors = ['blue', 'green', 'orange', 'purple', 'red', 'yellow'];

var thecolor = colors[x];

$('.current-menu-item').css({color: thecolor});

$("a").hover(function () {
    $(this).css({
        color: thecolor
    });
}, function () {
    $(this).css({
        color: 'blue'   // change 'blue' to whatever the normal color is without hover
    });
});

}

logoChange();

Upvotes: 2

Related Questions