Rotating header image
Here are some instructions on adding a rotating image to your pebble site. Start with the default pebble theme and make the following changes.
Add images to your theme folder; name them header0.jpg, header1.jpg, header2.jpg.
Add the following div just below the blogDescription.
<div id="rotateButton">
<a href="javascript: var x = document.getElementById('header').style.backgroundImage='url(themes/user-default/header'+Math.floor(Math.random()*3)+'.jpg)';">
<img src="themes/user-default/rotate.gif" border="0">
</a>
</div>
Add the following style just below the #header style.
#rotateButton {
bottom: 2px;
right: 2px;
position:absolute;
}
The math going on with random and floor make more sense with some examples.
Below is a div with an id of sample. Click on the button just above it and you should see the text change to contain a random number, that same number times 3 and the floor of the same number times 3.
The random function generates a number that is less than 1. The floor function strips the fractional part of the number.
If you take one of the numbers from the smaller end of that spectrum, say 0.1, multiply it by 3 you get 0.3. Floor that and you get 0.
If you take one of the numbers higher up, say 0.4, multiply it by 3 you get 1.2. Floor that and you get 1.
If you take one of the numbers higher up, say 0.7, multiply it by 3 you get 2.1. Floor that and you get 2.
The numbers will never reach 3 because the number I'm multiplying by will always be less than 1. If you had 8 pictures, change the number from a 3 to an 8.
Check out waruiyatsu, the author has rotating images too but does it slightly differently.