This is quite fun code to write. Here's an easy example; it will give a 'snapping' non fluid transition between sizes.
<html>
<head>
<script type="text/javascript">
function grow(what)
{
what.style.width="80px";
what.style.height="80px";
}
function shrink(what)
{
what.style.width="50px";
what.style.height="50px";
}
</script>
<style type="text/css">
td.icon_container
{
width:100px;
height:100px;
text-align:center;
}
img.icon
{
border:solid 2px black;
width:50px;
height:50px;
}
</style>
</head>
</body>
<table class="icons">
<tr>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
</tr>
</table>
</body>
</html>
This is a nicer example. it will give a smooth adjustable slide between sizes. The code takes full advantage of javascripts 'late property binding' abilities; something I particularly like about javascript.
Both examples make use of the nature of table cells (x-y alignment) abilities. You could probably do this without tables using auto margins.
<html>
<head>
<script type="text/javascript">
/**
* Change these at your will.
*/
var SIZE_BIG = 80;
var SIZE_SMALL = 40;
var SIZE_INITIAL = SIZE_SMALL;
var ANIM_SPEED = 5;
/**
* 'Timer task' function; will keep on creating timeouts
* for the parameter object until its 'present_size' and
* 'go_to' properties are equal.
*
* \todo You should put a 'range check' rather than an
* absolute zero check. You'll find, if you change the
* what.present_size -= 1 and what.present_size += 1 lines
* to inc/dec by 2 and then try to go to an odd numbered
* size from an even numbered size, that you get a strange
* vibration effect. That's why I've 'hard coded' the
* inc/dec values (i.e. not made them global 'constants')
*/
function _size(what)
{
if(what.present_size > what.go_to)
{
what.present_size -= 1;
setTimeout(function(){_size(what);},ANIM_SPEED);
}
else if(what.present_size < what.go_to)
{
what.present_size += 1;
setTimeout(function(){_size(what);},ANIM_SPEED);
}
what.style.width = what.present_size + "px";
what.style.height = what.present_size + "px";
}
/**
* Function to make sure that if a parameter object
* DOESN'T yet have a runtime 'present_size' property,
* that one is created and set to the initial size constant
*/
function _size_check(what)
{
if(what.present_size == null)
{
what.present_size = SIZE_INITIAL;
}
}
/**
* Interface functions; these should be the only functions
* you need to call from... 'outside' so to speak..
*/
function grow(what)
{
_size_check(what);
what.go_to = SIZE_BIG;
_size(what);
}
function shrink(what)
{
_size_check(what);
what.go_to = SIZE_SMALL;
_size(what);
}
</script>
<style type="text/css">
td.icon_container
{
width:100px;
height:100px;
text-align:center;
}
img.icon
{
border:solid 2px black;
/*Should be the same as the script INITIAL_SIZE constant's value*/
width:40px;
height:40px;
}
</style>
</head>
</body>
<table class="icons">
<tr>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
<td class="icon_container">
<img class="icon" onmouseover="grow(this);" onmouseout="shrink(this);"/>
</td>
</tr>
</table>
</body>
</html>
Images are empty with borders so you can see what's going on, if you src them, then the image will scale to it's element's size.
I hope that's enough to start you making your own amusing Javscript animathingies... Code's tested on Opera 9 and Firefox 2. Let me know back if there are IE oddities...
The 'jumping' shouldn't be too hard, but it would detract from what is otherwise simple example code, so I'll leave that up to you to research...
