Play video of sparks onclick of text

I'm just starting out with JavaScript and I've hit a snag. I have a transparent sparks animation in .ogv and I want it to play when I click on text (which also has a neon glowing effect). I can overlap the video under the text but I want a more seamless effect. I haven't been able to find a solution and I'd really appreciate any help here. Here's what I have so far:


[CODE]
<div id="splash">
<div id="sparks">
<video id="neonsparks" width="200" height="300">
<source src="sfx/sparks.ogv" type="video/ogg"></source>
</video>
</div>
<audio id="neon-on" preload="auto">
<source src="sounds/splash.mp3"></source>
<source src="sounds/splash.ogg"></source>
</audio>
<a href="#">Media Design</a>

<script src="scripts/sparks.js"></script>
<script src="scripts/neon.js"></script>

</div>
</div>
[CODE]



JAVASCRIPT FOR SPARKS.JS:

[CODE]
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('neonsparks');
function hoverVideo(e)
{
if(e.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}

}
[CODE]

Glad you could use it. I did arrive at a solution earlier which turned out to be pretty simple. I added this to my HTML:


<a onmouseover="hoverVideo()">Media Design</a>



and this to my JavaScript for sparks.js:



function hoverVideo()
{
var vid = document.getElementById('neonsparks');
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}



That solved the problem and I think converting my video to an animated GIF should fix any cross-browser compatibility issues. There's just the problem of hiding the black box that surrounds the image. Chrome has it overlapping my other text. Can z-index help here? If anyone has a better way of doing this I'd love to hear it.

Is there any alternative coding for it?

Usedcars (http://www.usedcarsite.com.au/)

If there is I'd love to hear about it.