Script Help : Convert from img name -> img id

How do I convert this script from using the img name to using the img id so I can use img rollovers.

[code=php]
<script type=”text/javascript”>
{

var homeOff = new Image();
homeOff.src = “images/menu/home_off.gif”;
var homeOn = new Image();
homeOn.src = “images/menu/home_on.gif”;

var aboutOff = new Image();
aboutOff.src = “images/menu/about_off.gif”;
var aboutOn = new Image();
aboutOn.src = “images/menu/about_on.gif”;

var servicesOff = new Image();
servicesOff.src = “images/menu/services_off.gif”;
var servicesOn = new Image();
servicesOn.src = “images/menu/services_on.gif”;

var portfolioOff = new Image();
portfolioOff.src = “images/menu/portfolio_off.gif”;
var portfolioOn = new Image();
portfolioOn.src = “images/menu/portfolio_on.gif”;

var contactOff = new Image();
contactOff.src = “images/menu/contact_off.gif”;
var contactOn = new Image();
contactOn.src = “images/menu/contact_on.gif”;

var step_oneOff = new Image();
step_oneOff.src = “images/menu/step_one_off.gif”;
var step_oneOn = new Image();
step_oneOn.src = “images/menu/step_one_on.gif”
}

function inact(imgName)
{
if(document.images)
{
document[imgName].src = eval(imgName+’Off.src’);
}
}

function act(imgName)
{
if(document.images)
{
document[imgName].src = eval(imgName+’On.src’);
}
}

</script>
[/code]

And here’s the html img call for the rollovers:

[code=php]
<a href=”index.php” onmouseover=”act(‘home’);” onmouseout=”inact(‘home’);”><img src=’images/menu/home_off.gif’ alt=”Welcome to Bueza.com” style=’border: 0px;’ id=’home’ /></a>
[/code]

If someone could recode my function so that it requires the img ID isntead of the img name, that would be most appreciated!

Thanks!
Jaime Bueza

Also in #JavaScript _↴