HTML, JS & CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script type='text/javascript'>
var MIN_FONT_SIZE = -1;
var MAX_FONT_SIZE = 33;
var INC_FONT_SIZE = 1;
var FONT_TYPE;
var RAISE_OBJ = null;
var SHRINK_OBJ = new Array();
var fOnload = window.onload;
window['onload'] = function ( ) {
if ( fOnload ) fOnload();
var aA = document.getElementsByTagName('a');
var fontSize = null;
for ( var x = 0 ; x < aA.length ; x++ ) {
if ( aA[x].className == 'expandText' ) {
if ( MIN_FONT_SIZE == -1 ) {
fontSize = getStyle( aA[x], 'fontSize' );
if ( fontSize.length == 0 || fontSize == 'undefined' ) fontSize = getStyle( aA[x], 'font-size' );
if ( fontSize.length == 0 || fontSize == 'undefined' ) {
throw new Error('Unable to find font size!');
}
}
aA[x]['onmouseover'] = function ( ) {
if ( MIN_FONT_SIZE == -1 ) return true;
RAISE_OBJ = this;
};
aA[x]['onmouseout'] = function ( ) {
if ( MIN_FONT_SIZE == -1 ) return true;
if ( this == RAISE_OBJ ) RAISE_OBJ = null;
};
SHRINK_OBJ[SHRINK_OBJ.length] = aA[x];
aA[x].style.fontSize = fontSize;
}
}
MIN_FONT_SIZE = parseInt(fontSize, 10);
FONT_TYPE = fontSize.replace( MIN_FONT_SIZE, '' );
window.setInterval('raiseMe()', 50);
window.setInterval('shrinkMe()', 50);
}
function raiseMe() {
if ( !RAISE_OBJ ) return true;
var cFontSize = parseInt(RAISE_OBJ.style.fontSize, 10);
if ( ! ( cFontSize + INC_FONT_SIZE > MAX_FONT_SIZE ) ) {
RAISE_OBJ.style.fontSize = (cFontSize + INC_FONT_SIZE) + FONT_TYPE;
}
}
function shrinkMe() {
for ( var x = 0 ; x < SHRINK_OBJ.length ; x++ ) {
var cFontSize = parseInt(SHRINK_OBJ[x].style.fontSize, 10);
if ( SHRINK_OBJ[x] != RAISE_OBJ && !( cFontSize - INC_FONT_SIZE < MIN_FONT_SIZE ) ) {
SHRINK_OBJ[x].style.fontSize = (cFontSize - INC_FONT_SIZE) + FONT_TYPE;
}
}
}
function getStyle(obj,styleProp) {
if (obj.currentStyle)
var y = obj.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleProp);
return y;
}
</script>
<style type='text/css'>
a.expandText {
font-size: 22px;
}
</style>
<title>test</title>
</head>
<body>
<div>
<a href='#' class='expandText'>A</a>
<a href='#' class='expandText'>B</a>
<a href='#' class='expandText'>C</a>
<a href='#' class='expandText'>D</a>
<a href='#' class='expandText'>E</a>
<a href='#' class='expandText'>F</a>
<a href='#' class='expandText'>G</a>
<a href='#' class='expandText'>H</a>
<a href='#' class='expandText'>I</a>
<a href='#' class='expandText'>J</a>
<a href='#' class='expandText'>K</a>
<a href='#' class='expandText'>L</a>
<a href='#' class='expandText'>M</a>
<a href='#' class='expandText'>N</a>
<a href='#' class='expandText'>O</a>
<a href='#' class='expandText'>P</a>
<a href='#' class='expandText'>Q</a>
</div>
</body>
</html>