Image Effects - Themes by James

1) Change Opacity ( Place before </head>)

<style type="text/css">
img{opacity: 0.6;}
</style>

2)  Change Opacity on Hover ( Place before </head>)

<style type="text/css">
img{opacity: 1;}
img:hover{opacity: 0.6;} 
</style>

3) Shake Images on Hover

PLACE THIS BEFORE </HEAD>

<style> 
.shakeimage{ 
position:relative} 
</style> 
<script language="JavaScript1.2"> 
//configure shake degree (where larger # equals greater shake) 
var rector=3 
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>

ADD THIS BELOW CODE INSIDE THE <IMG> TAG OF ALL THE IMAGES YOU WANT THE EFFECT APPLIED TO.

class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"