Mail Login

[redice]

Hi There,

I would like to add a Mail Login form on an image but dont know
how to go about this.

Could some one kindly let me know how this is done.

Regards
redice

[ddadmin]

You'll need to elaborate, as a "login form" and an image are two separate things.

[redice]

The Image is a simple box that has a username and password field to login into email. (webmail)

Now currently the login doesnt work. I would like to get this to work how may it be done?

[Twey]

The Image is a simple box that has a username and password field

Erm... you drew a login and password box on an image?

[redice]

trying to

[Twey]

You mean, in a graphics-editing program?

[redice]

yes or dreamweaver once iv imported the image.
is it do-able?

[redice]

<!--

function setFocus()
{
    if (document.imp_login.imapuser.value == "") {
        document.imp_login.imapuser.focus();
    } else {
        document.imp_login.pass.focus();
    }
}


function submit_login(e)
{
    if (typeof e != 'undefined' && !enter_key_trap(e)) {
        return;
    }

    if (document.imp_login.imapuser.value == "") {
        alert('Please provide your username.');
        document.imp_login.imapuser.focus();
        return false;
    } else if (document.imp_login.pass.value == "") {
        alert('Please provide your password.');
        document.imp_login.pass.focus();
        return false;
    } else {
        document.imp_login.loginButton.disabled = true;
        document.imp_login.submit();
        return true;
    }
}
//-->
</script>

<form name="imp_login" action="http://webmail.cyber-clix.net/horde/imp/redirect.php" method="post" target="_parent">
  <div align="center">
  <input type="hidden" name="actionID" value="" />
  <input type="hidden" name="url" value="" />
  <input type="hidden" name="mailbox" value="INBOX" />
  <input type="hidden" name="load_frameset" value="1" />
  <input type="hidden" name="autologin" value="0" />
  </div>
  <div id="menu"></div>

<table width="100%"><tr><td align="center"><table width="300" align="center">

<tr>
    <td colspan="2">
        <input type="hidden" name="server" value="localhost" />
        <input type="hidden" name="port" value="143" />
        <input type="hidden" name="namespace" value="" />

        <input type="hidden" name="maildomain" value="cyber-clix.net" />
        <input type="hidden" name="protocol" value="imap/notls" />
        <input type="hidden" name="realm" value="" />
</td>
</tr>

<tr>
    <td colspan="2"><input type="hidden" name="folders" value="INBOX." /></td>
</tr>

<tr>
    <td align="right" class="light"><b class="style1">Username</b></td>

    <td align="left" class="light" nowrap="nowrap">
      <input name="imapuser" type="text" class="style1" tabindex="1" value="" />
        </td>
</tr>
<tr>
    <td align="right" class="light"><b class="style1">Password</b></td>
    <td align="left"><input name="pass" type="password" class="style1" tabindex="2" /></td>
</tr>

<tr>
    
    <td align="right" class="light"><div align="right">
      <input type="submit" class="style1" name="loginButton" tabindex="4" value="Log in" onclick="return submit_login();" />
    </div></td>
</tr>


</table></td></tr></table>
</form>

<script language="JavaScript" type="text/javascript">
<!--

function updatePort()
{
}

function selectLang()
{
    // We need to reload the login page here, but only if the user hasn't
    // already entered a username and password.
    if (document.imp_login.imapuser.value == '' &&
        document.imp_login.pass.value == '') {
        var lang_page = 'login.php?new_lang=' + document.imp_login.new_lang[document.imp_login.new_lang.selectedIndex].value;
        self.location = lang_page;
    }
}

if (parent.frames.horde_main) {
    document.imp_login.target = '_parent';
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Setup the enter keytrap code.
if (window.document.captureEvents != null) {
    window.document.captureEvents(Event.KEYPRESS);
    window.document.onkeypress = submit_login;
}
//-->
</script>
<!-- This file contains any "Message Of The Day" Type information -->
<!-- It will be included below the log-in form on the login page. -->

<br />
<table width="100%"><tr>
</tr></table>
<script language="JavaScript1.5" type="text/javascript">
<!--
var _setHordeTitle = 1;
try {
    if (document.title && parent.frames.horde_main) parent.document.title = document.title;
} catch (e) {
}
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
if (typeof(_setHordeTitle) == 'undefined' && document.title && parent.frames.horde_main) parent.document.title = document.title;

// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
setFocus()
//-->

Am trying to get the above login script work on my website www.digitalclix.net on the login in the right top corner. How may i achieve tht?

Your help will be greatly appreciated

Redice

[Twey]

Am trying to get the above login script work on my website www.digitalclix.net on the login in the right top corner.

Ah, I see. I thought you just drew a picture of a log-in form and expected it to function
You need to have a normal form (made with <form> tags), then have the image as a background.

[jstgermain]

here you go:

<!--

function setFocus()
{
    if (document.imp_login.imapuser.value == "") {
        document.imp_login.imapuser.focus();
    } else {
        document.imp_login.pass.focus();
    }
}


function submit_login(e)
{
    if (typeof e != 'undefined' && !enter_key_trap(e)) {
        return;
    }

    if (document.imp_login.imapuser.value == "") {
        alert('Please provide your username.');
        document.imp_login.imapuser.focus();
        return false;
    } else if (document.imp_login.pass.value == "") {
        alert('Please provide your password.');
        document.imp_login.pass.focus();
        return false;
    } else {
        document.imp_login.loginButton.disabled = true;
        document.imp_login.submit();
        return true;
    }
}
//-->
</script>

<form name="imp_login" action="http://webmail.cyber-clix.net/horde/imp/redirect.php" method="post" target="_parent">
  <div align="center">
  <input type="hidden" name="actionID" value="" />
  <input type="hidden" name="url" value="" />
  <input type="hidden" name="mailbox" value="INBOX" />
  <input type="hidden" name="load_frameset" value="1" />
  <input type="hidden" name="autologin" value="0" />
  </div>
  <div id="menu"></div>

<table width="100%"><tr><td align="center"><table width="300" align="center">

<tr>
    <td colspan="2">
        <input type="hidden" name="server" value="localhost" />
        <input type="hidden" name="port" value="143" />
        <input type="hidden" name="namespace" value="" />

        <input type="hidden" name="maildomain" value="cyber-clix.net" />
        <input type="hidden" name="protocol" value="imap/notls" />
        <input type="hidden" name="realm" value="" />
</td>
</tr>

<tr>
    <td colspan="2"><input type="hidden" name="folders" value="INBOX." /></td>
</tr>

<tr>
    <td align="right" class="light"><b class="style1">Username</b></td>

    <td align="left" class="light" nowrap="nowrap">
      <input name="imapuser" type="text" class="style1" tabindex="1" value="" />
        </td>
</tr>
<tr>
    <td align="right" class="light"><b class="style1">Password</b></td>
    <td align="left"><input name="pass" type="password" class="style1" tabindex="2" /></td>
</tr>

<tr>
    
    <td align="right" class="light"><div align="right">
      <input style="background: url(http://www.methodcomptech.com/upload/simpsons.gif) ; width: 200 ; height: 200 ; " type="submit" border="0" class="style1" name="loginButton" tabindex="4" value="Log in" onclick="return submit_login();" />
          </div></td>
</tr>


</table></td></tr></table>
</form>

<script language="JavaScript" type="text/javascript">
<!--

function updatePort()
{
}

function selectLang()
{
    // We need to reload the login page here, but only if the user hasn't
    // already entered a username and password.
    if (document.imp_login.imapuser.value == '' &&
        document.imp_login.pass.value == '') {
        var lang_page = 'login.php?new_lang=' + document.imp_login.new_lang[document.imp_login.new_lang.selectedIndex].value;
        self.location = lang_page;
    }
}

if (parent.frames.horde_main) {
    document.imp_login.target = '_parent';
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Setup the enter keytrap code.
if (window.document.captureEvents != null) {
    window.document.captureEvents(Event.KEYPRESS);
    window.document.onkeypress = submit_login;
}
//-->
</script>
<!-- This file contains any "Message Of The Day" Type information -->
<!-- It will be included below the log-in form on the login page. -->

<br />
<table width="100%"><tr>
</tr></table>
<script language="JavaScript1.5" type="text/javascript">
<!--
var _setHordeTitle = 1;
try {
    if (document.title && parent.frames.horde_main) parent.document.title = document.title;
} catch (e) {
}
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
if (typeof(_setHordeTitle) == 'undefined' && document.title && parent.frames.horde_main) parent.document.title = document.title;

// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
setFocus()
//-->

*************ALSO*************
ADD
border: 0;
to the style 1 in the css.