insertBefore on mouseover

I want to know if i am allowed to insertBefore on Mouseover

[negs]

I have the following

<li><a href="example.com"></li>

and I want to insert

<img src="picture.png" />

before the anchor

so that

onmouseover state:

<li><img src="picture.png" /><a href="example.com"></li>
//image inserted

onmouseout state:

<li><a href="example.com"></li>
//back to normal

Here is my code, simplified - the code is loaded on window.onload

//imgNode contains the image node
//liNode contains the list item node
//aNode contains the anchor node

aNode.onmouseover = liNode.insertBefore(imgnode,ahref);
outnode = liNode.getElementsByTagName('img');
aNode.onmouseout = liNode.removeChild(outnode[0]);

I think that what is happening is that the DOM changes are all happening right in the beginning of page load, and not at the time of mouseover. Does anyone know how to get around this? I would like to try to write unobtrusive code which means not putting the mouseovers inline, but I am starting to get frustrated. Unobtrusive javascript is usable for everyone except the programmer! That is a joke, but really, this is challenging stuff.

I would have set the

a:hover

to contain the background image, but that place is already taken so I cannot.

Thanks.

[edited by: negs at 2:00 am (utc) on Oct. 31, 2007]

[negs]

:)

[daveVk]

aNode.onmouseover = liNode.insertBefore(imgnode,ahref);

needs to be

aNode.onmouseover = function {liNode.insertBefore(imgnode,ahref); }

and same on mouseout

A more direct way is to include the image aways and change its display state. Also I think it can be done with CSS and no javascript

[lavazza]

If the a:hover isn't an option, you could use JS to alter the CSS className of the element(s)... although showing and hiding one image will cause a bit of visual 'jumping'

How about using two same-sized images as bullet points?

-------------
CSS
-------------

<style type="text/css">
.displayNone {
display:none;
}

.displayInline {
display:inline;
}

.blueBullet {
list-style-image: url(images/bluePic.png);
}

.redBullet {
list-style-image: url(images/redPic.png);
}
</style>

-------------
JS
-------------

<script type="text/javascript">

function doDisplayImage(e) {
var myElement = e;
myElement.className = 'displayInline';
}
function doNotDisplayImage(e) {
var myElement = e;
myElement.className = 'displayNone';
}
function goRed(z) {
var thisLI = z;
thisLI.className='redBullet';
}

function goBlue(z) {
var thisLI = z;
thisLI.className='blueBullet';
}
</script>

-------------
HTML
-------------

<ul>
<li>
<a href="http://www.example.com"
onMouseOver="doDisplayImage(id001);"
onMouseOut="doNotDisplayImage(id001);"
onClick="doNotDisplayImage(id001);">
<img src="images/picture.png"
id="id001"
class="displayNone">
testOne
</a>
</li>
</ul>
<ul>
<li class="blueBullet" onMouseOver="goRed(this);" onMouseOut="goBlue(this);" >
<a href="http://www.example.com">testTwo A</a>
</li>
<li class="blueBullet" onMouseOver="goRed(this);" onMouseOut="goBlue(this);" >
<a href="http://www.example.com">testTwo B</a>
</li>
</ul>

[negs]

Thanks, everyone.
daveVk - your solution worked.
lavazza - believe me, I would have kept it that simple, except that the mouseover has to be on the anchor tag, which can't be hidden, unfortunately.