bei onclick auf href -> kl. rechteck m. auswahl


  • alien288
  • 1156 Aufrufe 5 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • bei onclick auf href -> kl. rechteck m. auswahl

    hi, ich bräuchte mal dringend so was!!! nen kumpel meinte, das geht mit javascript , hat er da recht??? also, hoffentlich wisst ihr, was ich meine, also, nochmal:

    hab da einen hypertext, wenn der angeklickt wird, soll sich so ein kleines auswahl-menü aufblättern, also so nen rechteck mit weiteren hytertexten, zb "löschen", "ändern", "melden"

    mit dropdown-boxen is es schlecht, ich möchte nix gewöhnliches haben, meine frage, wie kriege ich dieses rechteck, dass sich "über" die eigentliche seite stellt, und bei rollout aus dem feld sich wieda schließt, geht das mit javascript ??? binn noch anfänger und hab bis jetzt nur gerechnet und formulareingaben damit überprüft

    noch nen kleines beispiel: avirex.gamorz.de/chat/selbstdenker.htm

    klickt mal rechts auf nen roten eintrag im menü, dann seht ihr, was ich meine
    oder wenn man hier im board auf den nick neben seinem eigenen beitrag klickt!

    danke

    PS: ich will nich den fertigen code, will nur ungefähr die theorie wissen, welche komponennten ich brauch und so, ach so, und wenn ihr mir noch sagen könnt, wie ich es schaff, dass es sich so aufklappt wie hier im board, währe ich glücklich bis an mein lebensende ;)

    danke
    mfg

  • Hallo.

    Also ich hab jetzt mal schnell sowas gemacht. Ich hoffe, dass du soetwas meinst: klick hier

    Das hab ich mit dem Macromedia Fireworks MX 2004 gemacht. Das Design und noch ein paar andere Sachen kann man natürlich verstellen.
    Und es wird dort übrigens auch mit Javascript gemacht. Also wennst dich mit JS auskennst kannst auch den Quellcode verändern.

    Ein anderer Vorschlag ist DHTML. Mit dem müsste es auch funzen. Leider kenn ich mich da nicht aus.
    Dazu kann ich dir nur einen Link geben, wo du dir ein paar Sachen anschaun und downloaden kannst. Klick hier (einfach im Menü oben auf DHTML LAYER klicken, und dann auf der linke Seite auswählen.)

    Mfg. kelk3

  • hey, klasse, genau das meine ich!!!
    vielen dank, werd es mir noch anschauen, aber mich interessiert es eher in javascript, binn in der lernphase, aba schon relativ weit!!

    könntest du mir den code geben, oder die datei, die du mit fireworks gemacht hast?!? kenne mich nämlich in fireworks nich aus, würdest mir also sehr helfen ;)

    aso, mit rechtsklick -> Quellcode anzeigen gehts auch mim quellcode anzeigen ;) :lego:

  • das ist eigentlich ziemlich einfach:

    css bietet eine eigenschaft, die heißt display
    mit display:none kann man ein objekt ausblenden,
    mit display:inline wieder einblenden

    das ganze lässt sich per js ansteuern:
    objekt.style.display = "none";
    objekt.style.display = "inline";

    das objekt sollte dann nurnoch eine absolute position haben:
    <objekt style="position:absolute; top:120; left:240">

    hier mal ein beispiel:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>MENU</title>
    4. <script language="JavaScript">
    5. function zeige(id)
    6. {
    7. document.getElementById(id).style.display="inline";
    8. }
    10. function verstecke(ids)
    11. {
    12. var einzeln = ids.split(";");
    13. for(i=0;i<einzeln.length;i++)
    14. {
    15. document.getElementById(einzeln[i]).style.display="none";
    16. }
    17. }
    18. </script>
    19. </head>
    20. <body onDblClick="verstecke('submenueins;submenuzwei')">
    21. <div align="center" style="color:#ffffff; border:1px solid #151515; background:#555555; position:absolute; left:10; top:10; width:100; cursor:pointer" id="menueins"
    22. onMouseOver="verstecke('submenueins;submenuzwei'); zeige('submenueins')">
    23. Hier Dr&uuml;ber
    24. </div>
    25. <div align="center" style="color:#ffffff; border:1px solid #151515; background:#555555; position:absolute; left:153; top:126; width:100; cursor:pointer" id="menuzwei"
    26. onMouseOver="verstecke('submenueins;submenuzwei'); zeige('submenuzwei')">
    27. Hier Dr&uuml;ber 2
    28. </div>
    30. <div align="center" style="color:#ffffff; border:1px solid #151515; background:#555555; position:absolute; left:110; top:10; width:100; cursor:pointer; display:none" id="submenueins">
    31. SUBMENU
    32. </div>
    33. <div align="center" style="color:#ffffff; border:1px solid #151515; background:#555555; position:absolute; left:253; top:126; width:100; cursor:pointer; display:none" id="submenuzwei">
    34. SUBMENU<br>
    35. kann<br>
    36. auch<br>
    37. mehrzeilig<br>
    38. sein<br>
    39. <table>
    40. <tr>
    41. <td>
    42. UND html<br>
    43. enthalten
    44. </td>
    45. </tr>
    46. </table>
    47. </div>
    48. </body>
    49. </html>
    Alles anzeigen


    cu nuss