Form Input Image Mouseover Submission Gadget?

[Excabus]

Hey Folks! New here, thank you for your time!

1) Your current skill level in any web related field.
I know my way around some code, i'd i'm up to my waist in it, but not swimming yet ;)

2) Do you want to do this yourself or employ someone?
Definitely myself with some assistance.

3) Where relevant can you provide an example of what you are trying to achieve.
Alright. I am trying to create a windows gadget to handle our wireless networks for some mobile clients. I have the base down. It's all formed up and whatnot. It calls batch scripts to connect and disconnect to various network. I want to put all these scripts in a directory and have this gadget call them as the user wishes to simplify their job when they are connecting to different networks. I want to create a button for them to click instead of the bulky, ugly, default gray one. I wanted it to look like it was pressing in on mouseover. So I scoured the interwebs for scripts and codes and whatnot, and some work and some don't. I find if it works it just wants to link to some other page. Well with this gadget I just want it to link to my batch script. Also the mouseover isn't working.

So I would like the mouseover on my button to work between to images and when I click it, to call my batch file.

What happens now is, I mouseover the button, it doesn't do anything. I then click it. The entire gadget turns into a little blank white square. Then the batch file fires simultaneously at the time of the change.

Ideas?

Heres the code in relation to all of this...

JScript -



<script type="text/javascript">
function network()
{
System.Shell.execute("C:\NetworkConnect.bat");
}
</script>


CSS Styling -


<style type="text/css">
.outer {width:30px; height:30px; background-image:url(bclick.png)}
.outer {display:block}
.outer img {border:0}
html>body .outer img {display:block}
.outer a:hover {visibility:visible}
.outer a:hover img {visibility:hidden}
</style>

HTML Form -


<form>
<div class="outer">
<input type="image"
onclick="network()"
img src="bdef.png"
width="30"
height="30">
</div>
</form>


I have a feeling the gadget killing itself is something to do with the code making the gadget or whatever processes the gadget try to open a new page.

I'm not sure why the mouseover isn't working...

Any help?

The JScript is placed in the header, the CSS Styling is placed in the body and so is the HTML Form, which is right after the CSS Styling.

I'm pretty noob for most purposes, so sorry if I rage out some web dev's with huge epeens.

Thanks :)