Anzeige

Login mit Hotspot

Login mit Hotspot | PSD-Tutorials.de

Erstellt von yunse, 14.11.2008.

  1. yunse

    yunse Guest

    Login mit Hotspot
    Also vollgende Probleme:

    1. Ich hab ein Login mit Hotspot bereichen erstellt und weiß nicht wie man aus einem Hotspot bereich ein Submit Button machen kann ... Ich hab schon überall gegoogelt doch bin nicht auf entscheidenen Informationen gestoßen.

    2. Ich weiß nicht was ich da falsch mache aber ich hab es schon so oft versucht den form-tack zu setzen doch ich glaube ich setze ihn immerflasch deswegen verschiebt sich dann alles auch im Web später.

    Der Code:
    HTML:
    1. <script type="text/javascript">
    2. <!--
    3. function MM_preloadImages() { //v3.0
    4.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    5.    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    6.    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    7. }
    8.  
    9. function MM_swapImgRestore() { //v3.0
    10.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    11. }
    12.  
    13. function MM_findObj(n, d) { //v4.01
    14.  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    15.    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    16.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    17.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    18.  if(!x && d.getElementById) x=d.getElementById(n); return x;
    19. }
    20.  
    21. function MM_swapImage() { //v3.0
    22.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    23.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    24. }
    25. //-->
    26. <body onLoad="MM_preloadImages('Bilder/regh_15.png','Bilder/pwh_15.png','Bilder/loginhov_15.png')">
    27. <table width="200" border="0" cellpadding="0" cellspacing="0">
    28.   <!--DWLayoutTable-->
    29.   <tr>
    30.     <td width="14" height="25" valign="top">
    31.         <table width="100%" border="0" cellpadding="0" cellspacing="0">
    32.               <!--DWLayoutTable-->
    33.               <tr>
    34.                 <td width="14" height="25" valign="top"><img src="Bilder/y-webdesign_06.png" width="14" height="25" /></td>
    35.             </tr>
    36.         </table>
    37.     </td>
    38.     <td width="186" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    39.       <!--DWLayoutTable-->
    40.       <tr>
    41.         <td width="174" height="19" valign="top">
    42.             <table width="100%" border="0" cellpadding="0" cellspacing="0">
    43.                   <!--DWLayoutTable-->
    44.                   <tr>
    45.                     <td width="174" height="19" valign="top">
    46.                         <input name="ws_user" type="text" class="form_username" style="background-image:url(Bilder/y-webdesign_07.png); padding-left:0px; padding-top:0px; height: 19px; width: 174px; position: absolute;" onFocus="this.className='form_usernameoff'" onBlur="this.className='form_usernameoff'" value="Name" id="ws_user" /></td>
    47.                 </tr>
    48.             </table>
    49.       </td>
    50.       <td width="12" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    51.         <!--DWLayoutTable-->
    52.         <tr>
    53.           <td width="12" height="25" valign="top"><img src="Bilder/y-webdesign_08.png" width="12" height="25" /></td>
    54.             </tr>
    55.         </table></td>
    56.     </tr>
    57.       <tr>
    58.         <td height="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    59.           <!--DWLayoutTable-->
    60.           <tr>
    61.             <td width="174" height="6" valign="top"><img src="Bilder/y-webdesign_09.png" width="174" height="6" /></td>
    62.               </tr>
    63.           </table></td>
    64.         </tr>
    65.      
    66.     </table></td>
    67.   </tr>
    68.   <tr>
    69.     <td height="28" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    70.       <!--DWLayoutTable-->
    71.       <tr>
    72.         <td width="14" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    73.           <!--DWLayoutTable-->
    74.           <tr>
    75.             <td width="14" height="28" valign="top"><img src="Bilder/y-webdesign_10.png" width="14" height="28" /></td>
    76.               </tr>
    77.           </table></td>
    78.           <td width="174" height="19" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    79.             <!--DWLayoutTable-->
    80.             <tr>
    81.               <td width="174" height="19" valign="top"><input name="pwd" type="password" class="form_password" style="background-image:url(Bilder/y-webdesign_11.png); padding-left:0px; padding-top:0px; height: 19px; width: 174px; position: absolute;" onFocus="this.classname='form_passwordoff'" onBlur="this.className='form_passwordoff'" value="Passwort" id="pwd"/></td>
    82.               </tr>
    83.           </table></td>
    84.           <td width="12" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    85.             <!--DWLayoutTable-->
    86.             <tr>
    87.               <td width="12" height="28" valign="top"><img src="Bilder/y-webdesign_12.png" width="12" height="28" /></td>
    88.               </tr>
    89.           </table></td>
    90.         </tr>
    91.       <tr>
    92.         <td height="9" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    93.           <!--DWLayoutTable-->
    94.           <tr>
    95.             <td width="174" height="9" valign="top"><img src="Bilder/y-webdesign_13.png" width="174" height="9" /></td>
    96.               </tr>
    97.           </table></td>
    98.         </tr>
    99.      
    100.     </table></td>
    101.   </tr>
    102.   <tr>
    103.     <td height="86" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    104.       <!--DWLayoutTable-->
    105.       <tr>
    106.         <td width="200" height="7" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    107.           <!--DWLayoutTable-->
    108.           <tr>
    109.             <td width="200" height="7" valign="top"><img src="Bilder/y-webdesign_14.png" width="200" height="7" /></td>
    110.             </tr>
    111.         </table></td>
    112.       </tr>
    113.       <tr>
    114.         <td height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    115.           <!--DWLayoutTable-->
    116.           <tr>
    117.             <td width="200" height="79" valign="top"><img src="Bilder/y-webdesign100.png" name="login" width="200" height="79" border="0" usemap="#Map" id="login" />            </td>
    118.           </tr>
    119.         </table></td>
    120.       </tr>
    121.       </table>
    122.     </td>
    123.   </tr>
    124. <map name="Map" id="Map">
    125.                 <area shape="poly" coords="3,31,97,61,111,77,-2,78" href="index.php?site=register" target="_self" alt="reg" onMouseOver="MM_swapImage('login','','Bilder/regh_15.png',1)" onMouseOut="MM_swapImgRestore()" />
    126.               <area shape="poly" coords="8,5,27,34,83,46,117,73,135,73,100,42,152,3" href="index.php?site=lostpassword" target="_self" alt="pwh" onMouseOver="MM_swapImage('login','','Bilder/pwh_15.png',1)" onMouseOut="MM_swapImgRestore()" />
    127.               <area shape="circle" coords="164,43,37" href="javascript:document.formName.login.value='NorthWest';document.formName.submit();" target="_self" alt="log" onMouseOver="MM_swapImage('login','','Bilder/loginhov_15.png',1)" onnouseout="MM_swapImgRestore()" onClick="login.submit()" />
    128. </map>
    Der Runde Hotspot bereich soll der Submit Button sein.
    Form-Tack: <form method="post" name="login" action="checklogin.php">

    wäre nett wenn ihr mir helfen könntet :)

    MFG Yunse ;)
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Login mit Hotspot
    AW: Login mit Hotspot

    muss die klickbare grafik denn zwangsläufig in einer imagemap liegen?
    wenn man einfach den button als grafik klickbar macht wäre das eine ganz einfache sache, und ginge auch ohne javascript.
    vielleicht kannst du mal deine grafik hier einstellen?
     
    #2      
  3. yunse

    yunse Guest

    Login mit Hotspot
    AW: Login mit Hotspot

    nene das ist mir schon kla das es dann einfacher ist bloz mein Login ist so aufgebau das buttons in einander übergehen und ich da unbedingt ein Hover brauch ...

    Also ich brauch dafür den Javascript besser gesagt ... ^^

    aber danke für deine Antwort wäre auch nett wenn mir jemand helfen könnte wo ich den Form-Tach einsetzen muss ...


    MFg yunse :)
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Login mit Hotspot
    AW: Login mit Hotspot

    das Form >Tag< umschliesst in der Regel die (alle) Eingabeelemente, die dazugehören.
    <form ... name="login">
    inputs
    submits etc.
    </form>

    das Versenden per Javascript funktioniert dann über

    <area ... ... onclick="document.login.submit()" >
     
    Zuletzt bearbeitet: 15.11.2008
    #4      
  5. yunse

    yunse Guest

    Login mit Hotspot
    AW: Login mit Hotspot

    area ... ... was muss da hin ?

    und das mit dem Form Tack weiß ich ja wie der geht aber wo ich ihn einfügen muss weiß ich nicht ...

    Form-Tag: <form method="post" name="login" action="checklogin.php"> ... </form>

    aber wo muss das hin ?
     
    #5      
  6. yunse

    yunse Guest

    Login mit Hotspot
    AW: Login mit Hotspot

    hilft mit bitte ich Arbeite daran schon fast jetzt 2 Wochen -.- und das ist das einzigste was mir wirklich noch fehlt ^^

    area ... ... was muss da hin ?

    und das mit dem Form Tag weiß ich ja wie der geht aber wo ich ihn einfügen muss weiß ich nicht ...

    Form-Tag: <form method="post" name="login" action="checklogin.php"> ... </form>

    aber wo muss das hin ?

    siehe bitte ersten Post ...


    MFG Yunse ;)
     
    #6      
  7. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Login mit Hotspot
    AW: Login mit Hotspot

    zwischen <form> und </form> müssen deine inputs liegen, die Du über document.formName.submit() verschicken willst.
     
    #7      
  8. yunse

    yunse Guest

    Login mit Hotspot
    AW: Login mit Hotspot

    ok soweit war ich auch schon aber es funktioniert nicht weil dann die hovers und der Submit trotden nicht funktioniert -.- aber trotzdem danke ;)...

    wäre nett wenn ich dich vllt. mal icq adden könnte oder so weil ich das dringendst brauch da ich schon 2 Wochen dran Arbeite aber nicht fertig bekomme weil damit das keiner so richtig hin bekommt wäre vllt. nett wenn du mir deine ICQ per PM schickst ;)
     
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Login mit Hotspot
    AW: Login mit Hotspot

    natürlich funktioniert der hover da nicht, weil du ja an der stellen nicht über einem element <img> stehst sondern über einer area einer imagemap. die hovers sind für Bilder <img> gedacht.
    die funktion müsste man schon anders notieren (kanst du an der stelle erst mal rausschmeissen aus dem code.)
    Dein submit sollte eigentlich funktionieren, wenn deine inputs innerhalb des forms liegen, und die submit() funktion aufrufst (dein form-name heisst nicht "formName" sondern "login").

    (http://de.selfhtml.org/javascript/index.htm ist 24/7 fürdich da)

     
    Zuletzt bearbeitet: 17.11.2008
    #9      
x
×
×
teststefan