I am reading about dynamicdrive.com topics while I’m on my night shift duty at work. They have so many useful articles and I learn something which is applicable to Weebly. Of course I did it with trial and error and I get it right. My tutorial in this article is all about photos that shakes when your mouse pointer hover on it.
So we begin.
1. Ready your images to use. Note that we will not use the drag and drop tools here to upload image rather we are going to upload it to the template itself.
2. Go to Design > Edit CSS/ HTML > Add new files (on the left side)
3. Select the photos you want to upload. (remember the names when you done uploading, should be like “myphoto.png,” etc…) and then save your template.
4. Go to <head> and paste the following: (Read the Basic for <head>)
<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>
Ok, the “var rector=3” states how strong the shaking is, you may choose 1 – 3 (3 is the strongest)
5. Now if you want to add an image with shaking effect, you need to add it by using the “embed code" and not the drag and drop style for photos. On the embed code paste the following:
<a href="http://theweeblytricks.weebly.com"><img src="http://theweeblytricks.weebly.com/files/theme/crying.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"></a>
Change the following:
-The red marked area is the link you want to go when the image was clicked. Please use a complete link address with http://. You can delete it if you don’t have.
-The Blue marked indicates your website address.
-The Green marked is the title of the image as you can see it when you done uploading in your template.
6. Do this step to every image you like to insert with shaking style. It seems hard at the beginning but you will get used to it. Please ask me questions if you have or advise improvements, I’ll appreciate it.
0 comments: