Menu
This is the coding I have. My employer would like to have the background image grow from small to big like in powerpoint. I have it to this so far. I can get the image to grow. Just need to do it without the onclick command so it is auto.
<script type=”text/javascript”>
var links = document.getElementsByTagName(‘a’);
for (var i = 0; i < links.length; i++)
if (links[i].className == ‘livethumbnail’)
{
var img = links[i].getElementsByTagName(‘img’)[0];
img.state = ‘small’;
img.smallSrc = img.getAttribute(‘src’);
img.smallWidth = parseInt(img.getAttribute(‘width’));
img.smallHeight = parseInt(img.getAttribute(‘height’));
img.largeSrc = links[i].getAttribute(‘href’);
img.largeWidth = parseInt(img.getAttribute(‘largewidth’));
img.largeHeight = parseInt(img.getAttribute(‘largeheight’));
img.ratio = img.smallHeight / img.smallWidth;
links[i].onclick = scale;
}
function scale()
{
var img = this.getElementsByTagName(‘img’)[0];
img.src = img.smallSrc;
if (! img.preloaded)
{
img.preloaded = new Image();
img.preloaded.src = img.largeSrc;
}
var interval = window.setInterval(scaleStep, 10);
return false;
function scaleStep()
{
var step = 10;
var width = parseInt(img.getAttribute(‘width’));
var height = parseInt(img.getAttribute(‘height’));
if (img.state == ‘small’)
{
width += step;
height += Math.floor(step * img.ratio);
img.setAttribute(‘width’, width);
img.setAttribute(‘height’, height);
if (width > img.largeWidth – step)
{
img.setAttribute(‘width’, img.largeWidth);
img.setAttribute(‘height’, img.largeHeight);
img.setAttribute(‘src’, img.largeSrc);
window.clearInterval(interval);
img.state = ‘large’;
}
}
}
}
</script>