A little change in my blog

Symmetrical docking is delicious.

I made some little changes regarding layout in my blog. The first change is the banner. I made the banner smaller than before. The first banner was 1000px wide, and now it's 900px wide. I didn't resize the image, but i cropped it 100px wide from the left. And before i cropped the image, i moved SONICVER2 title and Random things happen... aside so it didn't get cropped.

The second change is adding new widget (or gadget in Blogger's term), random image. It's not a random image gadget, but it's HTML / Javascript gadget. Yesterday i learned about Javascript Event and DOM in Internet Application Development class, and i thought that i could give it a try in my blog, and the random image is the result.

Do you like Kagami with megane?

Here's the detail on doing it:
1. Upload or your image, make sure it has the same extension and give them similar name like this, starting from zero:
docking_0.jpg
docking_1.jpg
docking_2.jpg
and so on....
2. Make sure you upload it in photobucket where the front address is always the same for all images in 1 album, like this:
http://i20.photobucket.com/albums/b210/sonic_ver2/Blog%20Random/docking_1.jpg
http://i20.photobucket.com/albums/b210/sonic_ver2/Blog%20Random/docking_2.jpg
3. Prepare a blank image, just a 1 x 1px image.
4. Put this code in the HTML / Javascript gadget:

<script type="text/javascript">
function randomizeImage(){
//getting a random number between 0 to number of image minus 1, and then convert it to string
var number=new String(Math.floor(Math.random()*(insert your number of image here)));

//get the img element, and change the image's src
document.getElementById("randomImage").src="your front link here"+number+".jpg";
}
</script>

<img src="your blank image link" onload="randomizeImage()"/>
<img id="randomImage" src=""/>

So how's this code works exactly?
1. The function is self explanatory. It generates a random number between 0 to number of image minus 1. And then join the number with the link, and change the image source to the new link.
2. The tricky part lies in the event. By using blank image and onLoad event, you can call randomizeImage() function right after the page (the blank image to be exact) completed its loading.
3. Some of you may ask "why not put onLoad="randomizeImage()" in randomImage?". If i did this, then the random image would randomized each time the image completed its loading. So we need to find an element which only load ONCE and only ONCE in page loading.
That's where the blank image did its role. Blank image only load once, and after it's completely loaded then the onLoad event is triggered and randomizeImage() called.

I won't explain about DOM image, because it's gonna be long to explain that. Anyway, this random image script is still in testing. I already tested it in IE6, FF3, and Opera (dunno what version), so far so good, it worked fine. If some of you find that this random image didn't work, please tell me via comment.

I haven't learned about PHP, web database, and ajax, so i don't have any idea how to generate a random image using that method. You may find this method too primitive or whatever, but yeah, i only learned this far so this is the only thing i can do for now.

Anyway, the random images' theme is symmetrical docking, and i found most of the images from misakichii's post about docking. Many thanks goes to misakichii for providing these images. And that's it for now.