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

[Borgs8472]

Would I get a response if this were a paid request?

[Steve Moore]

Probably

[Marco van Herwaarden]

Instead of binding the image to the document, you should bind it to the current container (div or td tag for example). Like that i think you could create multiple instances, but i am by no way a HTML/JS expert.

[Borgs8472]

^ ^
thanks for the tips, I will be playing about with those ideas