So my question is simple, I’m building a webpage in HTML and I want to incorporate a little JavaScript into it so as to make an image “vibrate” or “jiggle” Basically move back and forth in a relatively tight space/pattern.
I did some research and I found this:
Copy the below code and paste it into the <HEAD> section of your page
Example:<head>Code Here</head>
<style>
.jc{
position:relative;
}
</style>
<script language="JavaScript1.2">
var ns6=document.getElementById&&!document.all
var ie=document.all
var customcollect=new Array()
var i=0
function jiggleit(num){
if ((!document.all&&!document.getElementById)) return;
customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1 : customcollect[num].style.left=-1
}
function init(){
if (ie){
while (eval("document.all.jiggle"+i)!=null){
customcollect[i]= eval("document.all.jiggle"+i)
i++
}
}
else if (ns6){
while (document.getElementById("jiggle"+i)!=null){
customcollect[i]= document.getElementById("jiggle"+i)
i++
}
}
if (customcollect.length==1)
setInterval("jiggleit(0)",80)
else if (customcollect.length>1)
for (y=0;y<customcollect.length;y++){
var tempvariable='setInterval("jiggleit('+y+')",'+'100 )'
eval(tempvariable)
}
}
window.onload=init
</script>
NOW PASTE THIS ANYWHERE YOU WISH YOUR IMAGE TO APPEAR
<span id="jiggle0" class="jc"><b>YOUR IMAGE URL HERE</b></span>
They called it a “shivering pic” and gave an example… its exactly what I want. I did it exactly as they described it. I added the code where they said it was needed, I copied all the right parts (none of the directions), and I made sure everything is in the right place.
I tested it out an there was no image! There was nothing! I realized that this was because I was using a black background, and if there was any text, it would also be black, so what actually was happening was that it was merely showing the URL of the image I want to add in (I could see it once I highlighted it). Regardless, still no image (just the text), and still no vibrating/jittering/shivering/jiggling. I did note that there were bold tags right where it suggests to add the image URL… so to me that would make it seem like I would be putting in text.
PLEASE HELP! How do I make this code work, or how do I make an image “shiver”?
This is what you want :
Dynamic Drive : Shake Image script