Rollover links with acompanying image mouseover.

[DarkMonkey]

Basically I want a litlle image of a 'light' or a dark image to appear lit up when the corosponding link is rolled over.

() Links
() Home
() News

So () becomes () When I roll over home.

I would like it to be efficient too. If possibly I don't want a sepperate piece of code for every link. The image is obviously the same for all so I'd like for the effect to occur simply via some kind of ID system. which the link and the image share.

Hopefully you get what I'm saying. I dont' really know how to achieve this and I certainly don't know how to achieve it efficiently and properly. I'm rusty on javascript so any help would be great. Ta.

[Maelstrom]

Try this...it doesn't use an image just simple HTML but it will help you figure it out.

var changePoint
function changePrompt(value){
changePoint="bob"+value
document.getElementById(changePoint).innerHTML="<b>()</b>"
}
function changeBack(value){
changePoint="bob"+value
document.getElementById(changePoint).innerHTML="()"
}

that goes into the Head section under script (in case you didn't realize)

<span id="bob1">
()
</span>
<span onmouseOver="changePrompt(1)" onmouseout="changeBack(1)">
Help<br>
</span >
<span id="bob2">()</span>
<span onmouseOver="changePrompt(2)" onmouseout="changeBack(2)">
About.Me
</span>

Put that into your body
If you plan on using an image remember to cache them all so that the rollover works well on a bandwidth.

[DarkMonkey]

Thanks lots
Don't suppose somebody could jog my memory about caching images with javascript... Something like

Image = New Image('blah.jpg');

but I can't remember