Menu
hi everybody iwrote a little script so that when u mouser over an image it becomes the full image size but when its mouse out and its normal status its in a smaller size.
see example [URL=”http://www.clubrockrevolution.com/try/admin/session”]http://www.clubrockrevolution.com/try/admin/session
currently it only works with IE im wondering what i have to do to make it work cross browser i.e. with FF and Operah, heres the example code:
[CODE]
<style>
div.container {
z-index:2;
position:relative;
width:200px;
height:100px;
}
div.start {
z-index:2;
position:absolute;
background-image:url(../../events/exampleimg.jpg);
width:200px;
height:100px;
}
</style>
<script language=’javascript’>
function mOver() {
document.getElementById[‘test’].style.width=500;
document.getElementById[‘test’].style.height=300;
}
function mOut() {
document.getElementById[‘test’].style.width=200;
document.getElementById[‘test’].style.height=100;
}
</script>
<table>
<tr><td>
<div class=’container’>
<div class=’start’ onMouseOver=’mOver()’ onmouseout=’mOut()’></div>
</div>
</td>
<td><div class=text>date</div>
<div class=”eventh”>title</div>
<div class=”text”>info</div>
</td></tr>
</table>
p.s. i know its not as quick as say this.className = and working with css but im getting the rollover image size dynamically using php, hense im working it this way. ive taken all my php code out of the above to make it as simple as possible though. thanks in advance