Would you like your users to be able to log into your nabble forum from another page on your website?

Ive written a short peice of javascript to allow my users to log into my nabble forum from my websites front page. 

<b>Only logs into Nabble version of your Forum</b>

 WORKING CODE  ~ EDIT * areas and add image of choice for background image

<i><b>Notes:</b></i> You can change the style of #LI to suit your needs. As shown, log in image appears top left regardless of code placement. Changing 'absolute' to 'relative' and changing top: 10px; 
left: 10px; you can make it appear where you want it. You can view the codes effect and alter it to your needs by cut and pasting to this <a href="http://www.jmarshall.com/easy/html/testbed.html">Testbed</a>
then click display. Clicking 'log in' on the new page will show you the log in image. 

When using this script, you are logged into nabbles server version of your forum ONLY. All post and messages function and appear as normal. 

<i><b>Warning:</b></i> Changing the embed options of your forum will change the permalink of the log in page and the script will fail. You MUST have your embed options set NOT redirecting to your embedded forum <i><b>Before</b></i> you configure and add the code.



Code Below//



<table width="100%" id="userlinks" cellspacing="6">
<tr>
<td width="300px" style="font-size: 6.0pt;
font-family: verdana;
line-height: 1.5em"><b><i>Quick LOG IN</i></b><br>
(<a href='#ShowLI' onclick="show_LI()" 
>log in</a> | <a href='REGISTER PAGE PERMALINK*'>Register</a> )</td></tr></table>
<style type="text/css">
#LI{
position: absolute;filter: progid:DXImageTransform.Microsoft.Shadow(color=#B5B5B5 ,direction=135);
top: 10px;
left: 10px;
width: 300px;
height: 140px;
visibility: hidden;
border: 0px solid #000;
padding: 0px;
background-image: url(http://nabble-support.1.n2.nabble.com/file/n6320054/login.png);
font-size: 8.0pt;
font-family: verdana;
line-height: 1.7em
}
</style>
<script language="JavaScript">
function show_LI(){
if (document.getElementById)
{document.getElementById("LI").style.visibility = "visible"}
else {document.LI.visibility = "hidden"}
}//ends open function
function hide_LI(){
if (document.getElementById)
{document.getElementById("LI").style.visibility = "hidden";}
else{document.LI.visibility = "hidden";}
}//ends close function
</script>
<div id="LI" align="left">
<form style='display:inline' method="post" action="LOG IN PAGE PERMALINK*" accept-charset="UTF-8"> 
<input type="hidden" name="macro" value="login_page" /> 
<input type="hidden" id="nextUrl" name="nextUrl" value="MAIN PAGE PERMALINK*"/>
<div class="tableborder">
<div class="mydiv" valign="top">
&nbsp;&nbsp;<b>Welcome!</b>
<p class="expand" valign="top">
<a href="#cancel" onclick="hide_LI()">[X]</a></p></div>
<div class="tablepad">
<b>Login</b>
<br>
<input id="email" name="email" size="20" />
<input id="password" name="password" size="20" type="password" />
<input type="submit" value="Login" / onclick="hide_LI()">
&nbsp;
</div></div>
</form>
</div>