random image on load

I have found several scripts but i don't get them to work: What am i doing wro开发者_Python百科ng;

I want to change the color and some images on my page, so the second time you visite the page you may get another color.

I get the font color to change, but having problems with my image.

the js:

$(document).ready(function(){
  var colors = ["#D4FF00","#E18000","#ED4498","#0080C0"];
  var Rlogo= ['BIMP_groen.jpg','BIMP_oranje.jpg','BIMP_roze.jpg','BIMP_blauw.jpg'];  
  var rand = Math.floor(Math.random()*colors.length);
  $('a').css("color", colors[rand]);
  $('h2').css("color", colors[rand]);
  $('<img src="images/logo/' + Rlogo[rand] + '">').appendTo('#logo');
  });

in my html i have;

<img src="images/logo/BIMP_oranje.jpg" id="logo" align="right" alt='align="right"'>

the image doesn;t change on refresh.

please help

Try replacing this line:

$('<img src="images/logo/' + Rlogo[rand] + '">').appendTo('#logo');

with this:

$('#logo').attr("src","images/logo/" + Rlogo[rand]);

Essentially what this means is "get the DOM element with id="logo" and change the "src" element to "images/logo/" + Rlogo[rand].

"appendTo" add some content to an element but the #logo element ( which is an "img" element ) does not have inner html.

You should do something like this instead :

$("#logo").attr("src","images/logo/"+Rlogo[rand]);

You need to replace the image in the logos parent element:

<div id="logoParent">
<img src="images/logo/BIMP_oranje.jpg" id="logo" align="right" alt='align="right"'/>
</div>
<script type="text/javascript">
$('#logoParent').html('<img src="images/logo/' + Rlogo[rand] + '"/>');
</script>