tutorial #19 :spinning effect pada comment avatar

Okay , apit belajar benda ni kat blog mas ahmad safwan , blog dia smart wookk .Terbaek dari ladang , Hee , Okay function benda alah ni kalau kita tujukan cursor pada gambar orang yang komen nanti gambar tersebut akan berpusing-pusing , hanya pada gambar komen saje ok ! yang lain maybe tak jadi kot So kalau nk tngok example , korang pergilah mane-mane entry apit yg ada orang komen then try ,
Jom mula .
DesignEdit layoutAdd a gadjetHtml javascript
And paste kode ni .

<style type="text/css">


.avatar-image-container img, comments .avatar-image-container img {

-webkit-transition-duration: 0.8s;

-moz-transition-duration: 0.8s;

-o-transition-duration: 0.8s;

transition-duration: 0.8s;

</style>


<script src="https://sites.google.com/site/javascript10/mootools-1.3.js"></script>


<script>

window.addEvent("domready",function() {


// "Globals" - Will make things compress mo-betta

var $random = function(x) { return Math.random() * x; };

var availableWidth = 0, availableHeight = 0;

var cssPrefix = false;

switch(Browser.name) {

case "safari":cssPrefix = "webkit";break;

case "chrome":cssPrefix = "webkit";break;

case "firefox":cssPrefix = "moz";break;

case "opera":cssPrefix = "o";break;

}


// The Icons

var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");

// Apply opacity

var zIndex = 1000;

// Randomize each link

icons.each(function(element,index) {

var startDeg =(360);

var resetPlace = function() {

element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");

}

element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);

resetPlace();

element.addEvents({

mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},

mouseleave: resetPlace});

});

});

</script>

Okay ? Then save ! Lepas tu korang pepandai la tngok jadi ke x ok ?