Hi y'all!
Question: How can I apply the a Javascript mouseOver shake effect to ALL icons and images on my Moodle pages?
I've used the code found here:
http://www.dynamicdrive.com/dynamicindex4/shake.htm
to make certain icons "shake" on screen when a mouseover is done.
Step 1: Insert the below into the <head> section of your page:
<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">
/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
Step 2: Add the below inside the <img> tag of all of the images you want the effect applied to:
class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"
For example, in my course, I've managed to get the clock to shake and shimmer whenever I do a mouse-over.
Which brings me to my original question: How can I apply the same effect to ALL icons and images on my Moodle pages?
See attached image.
Now WHY would anyone want to do this????
Well, in the Spirit of BumpTop (now acquired by Google, the lucky and talented devils!!!), having icons that shake bring about a more visceral 3D object experience to Moodle which is dominated by 2D icons.
Awaiting your answer....
Frankie Kam, Melaka, Malaysia.