10 September 2008

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.

9 comments:

  1. KAGAMI WITH GLASSES. DO NOT WANT.

    ReplyDelete
  2. @IcyStorm
    Different people different taste.

    ReplyDelete
  3. Head spinning...
    Hard to understand all this...
    Still, I need ot learn more about this stuff...
    Eyes wide open at first picture...

    ReplyDelete
  4. @Rin
    Don't worry, it's kinda complicated if you haven't touch anything about HTML and Javascript. If you want to learn more, try W3Schools

    ReplyDelete
  5. so this code, how does it work again?
    Sorry, Kan'u is distracting me. xD

    ReplyDelete
  6. @Optic
    Try to read it once more with "Show Image" option in your browser turned off. :P

    ReplyDelete
  7. hmm...I guess it's a good thing I didn't keep going with this...I only barely passed intro to javascript in uni lol.

    That's still neat though. I should try to understand it some more so I can write stuff for my own page. Oh...except that wordpress isn't very flexible when it comes to customizing on your own I think... ><

    ReplyDelete
  8. oh...and...

    KANU...BOOBIES...!!! *head explodes*

    Kagami with glasses kind of reminds me of Rider actually. Like the modest maid Rider figure from gsc :P

    ReplyDelete
  9. @yuuwaku
    Are there no widget for adding your own HTML code in wordpress?

    @yuuwaku again...
    Yeah, Kanu boobies FTW! XD

    ReplyDelete