Demo of the code below: go to the main page and click on the right bottom strawberry.


// fade out, change image, fade in
function opacityTwo(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
var img1 = id;

for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
setTimeout("toggleImage('" + img1 +"')",(timer * speed));
for(i = opacEnd; i <= opacStart; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}

// change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function toggleOpacity(id, value, millisec) {
var x = value/100;
opacityTwo(id, 100, value, millisec);
}

function swapImage(img1,img2){
if(document.images)document.images[img1].src=img2;
}

function toggleImage(img1){
if(document.getElementById(img1).getAttribute('tgl') == null || document.getElementById(img1).getAttribute('tgl') == 'on') {
swapImage( img1 , 'pics/strawberry_bright.jpg' )
document.getElementById(img1).setAttribute('tgl', 'off');
}
else {
swapImage( img1 , 'pics/strawberry.jpg' )
document.getElementById(img1).setAttribute('tgl', 'on');
}
}