Can anyone fix my mouseover bbcode?

[Borgs8472]

Hey all. I have a nice mouseover code which allows you to have one image that if you put the mouse over it goes to another one.

Example

( I am aware of the potential trolling uses of this, so no need to point them out thanks )

The html replacement is:

<a onMouseOver="document.the_image.src='{option}';" onMouseOut="document.the_image.src='{param}';"> <img src="{param}" name="the_image" border-style:dotted;></a>

(nb: the dotted border was working - never mind)
and the usage is:
[mouseover={option}]{param}[/mouseover]
Where option and param are both image paths.

The problem with this code, is it only works once per page.

This means if the code is used twice in a page, neither image will do the mouseover effects.

This must be due to how document.the_image.src is called multiple times and asked to do mutually contradictory things.

I've looked on many webpages on how I might handle this with multiple images, but all of them involve predefining the mouseover images in the header, which is of course no good when I want user optional images.

Would anyone know a way of making document.the_image.src perhaps define itself as a unique variable so it doesn't interfere with other document.the_image.src elements? Or setting up an array of usable ids in the header perhaps?

I hope I've explained myself okay