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 1000
px wide, and now it's 900
px wide. I didn't
resize the image, but i cropped it 100
px 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.
jpgdocking_1.
jpgdocking_2.
jpgand 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 1
px 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.
