1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Javascript: Brauche eure Hilfe :)

Discussion in 'Web-Know-how für die Homepage' started by Taron, Sep 4, 2006.

Thread Status:
Not open for further replies.
  1. Taron

    Taron Byte

    Folgendes:
    Ich hab bei meiner neuen Seite so'ne dynamischen Buttons gemacht. (http://tarontrekko.ta.funpic.de/moep.png)
    Hier der Quellcode:

    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <title></title>

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--

    function MenueAuf(Men)
    {
    if(document.getElementById)
    {
    document.getElementById(Men).style.visibility="visible";
    }

    else if(document.all && !document.getElementById)
    {
    document.all[Men].style.visibility="visible";
    }
    }

    function MenueZu(Men)
    {
    if(document.getElementById)
    {
    document.getElementById(Men).style.visibility="hidden";
    }

    else if(document.all && !document.getElementById)
    {
    document.all[Men].style.visibility="hidden";
    }
    }

    //-->
    </SCRIPT>




    <script type="text/javascript">
    Normal1 = new Image();
    Normal1.src = "pics/Grafik12.gif"; /* erste Standard-Grafik */
    Highlight1 = new Image();
    Highlight1.src = "pics/Grafik2.gif"; /* erste Highlight-Grafik */

    Normal2 = new Image();
    Normal2.src = "pics/Grafik13.gif"; /* zweite Standard-Grafik */
    Highlight2 = new Image();
    Highlight2.src = "pics/Grafik3.gif"; /* zweite Highlight-Grafik */

    Normal3 = new Image();
    Normal3.src = "pics/Grafik14.gif"; /* dritte Standard-Grafik */
    Highlight3 = new Image();
    Highlight3.src = "pics/Grafik5.gif"; /* dritte Highlight-Grafik */

    Normal4 = new Image();
    Normal4.src = "pics/Grafik15.gif"; /* erste Standard-Grafik */
    Highlight4 = new Image();
    Highlight4.src = "pics/Grafik6.gif"; /* erste Highlight-Grafik */

    Normal5 = new Image();
    Normal5.src = "pics/Grafik16.gif"; /* erste Standard-Grafik */
    Highlight5 = new Image();
    Highlight5.src = "pics/Grafik7.gif"; /* erste Highlight-Grafik */

    Normal6 = new Image();
    Normal6.src = "pics/Grafik17.gif"; /* erste Standard-Grafik */
    Highlight6 = new Image();
    Highlight6.src = "pics/Grafik8.gif"; /* erste Highlight-Grafik */

    Normal7 = new Image();
    Normal7.src = "pics/Grafik18.gif"; /* erste Standard-Grafik */
    Highlight7 = new Image();
    Highlight7.src = "pics/Grafik9.gif"; /* erste Highlight-Grafik */

    Normal8 = new Image();
    Normal8.src = "pics/Grafik19.gif"; /* erste Standard-Grafik */
    Highlight8 = new Image();
    Highlight8.src = "pics/Grafik10.gif"; /* erste Highlight-Grafik */

    Normal9 = new Image();
    Normal9.src = "pics/Grafik20.gif"; /* erste Standard-Grafik */
    Highlight9 = new Image();
    Highlight9.src = "pics/Grafik11.gif"; /* erste Highlight-Grafik */

    /* usw. fuer alle weiteren zu benutzenden Grafiken */

    function Bildwechsel (Bildnr, Bildobjekt) {
    window.document.images[Bildnr].src = Bildobjekt.src;
    }
    </script>
    <style type="text/css">
    h1 { color:#6363A5; font-family:Arial,sans-serif; }
    p { color:#000000; font-family:Arial,sans-serif; }
    </style>
    </head>

    <body bgcolor="#FFFFC0" background="buttonsback.gif">

    <table border="0" cellpadding="0" cellspacing="0"><tr>
    <tr>
    <th>
    <a href="http://google.de"
    onmouseover="Bildwechsel(0, Highlight1); MenueAuf('Menu')"
    onmouseout="Bildwechsel(0, Normal1)"><img src="pics/Grafik12.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://microsoft.com"
    onmouseover="Bildwechsel(1, Highlight2)"
    onmouseout="Bildwechsel(1, Normal2)"><img src="pics/Grafik13.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://sun.com"
    onmouseover="Bildwechsel(2, Highlight3)"
    onmouseout="Bildwechsel(2, Normal3)"><img src="pics/Grafik14.gif"
    border="0"></a><br>
    </th>
    <th>
    <a href="http://apple.com"
    onmouseover="Bildwechsel(3, Highlight4)"
    onmouseout="Bildwechsel(3, Normal4)"><img src="pics/Grafik15.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://w3.org"
    onmouseover="Bildwechsel(4, Highlight5)"
    onmouseout="Bildwechsel(4, Normal5)"><img src="pics/Grafik16.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://w3.org"
    onmouseover="Bildwechsel(5, Highlight6)"
    onmouseout="Bildwechsel(5, Normal6)"><img src="pics/Grafik17.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://w3.org"
    onmouseover="Bildwechsel(6, Highlight7)"
    onmouseout="Bildwechsel(6, Normal7)"><img src="pics/Grafik18.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://w3.org"
    onmouseover="Bildwechsel(8, Highlight9)"
    onmouseout="Bildwechsel(8, Normal9)"><img src="pics/Grafik19.gif"
    border="0" ></a><br>
    </th>
    <th>
    <a href="http://w3.org"
    onmouseover="Bildwechsel(10, Highlight11)"
    onmouseout="Bildwechsel(10, Normal11)"><img src="pics/Grafik20.gif"
    border="0" ></a><br>
    </th>
    </tr>
    </table>
    </body>


    Nun will ich aber aus Platzgründen so ein Menü machen, dass sich bei onMouseOver ausklappt und die eigentlichen Links einthält. (z.B. soll sich bei Games ein Liste mit einzelnen Games ausklappen oder bei Links bestimmte Kategorien)
    So ein Script hab ich ja auch (http://tarontrekko.ta.funpic.de/moep2.png).

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function MenueAuf(Men) { if(document.getElementById) { document.getElementById(Men).style.visibility="visible"; } else if(document.all && !document.getElementById) { document.all[Men].style.visibility="visible"; } } function MenueZu(Men) { if(document.getElementById) { document.getElementById(Men).style.visibility="hidden"; } else if(document.all && !document.getElementById) { document.all[Men].style.visibility="hidden"; } } //--> </SCRIPT> <TITLE>Beispiel: DHTML-Menue</TITLE> </HEAD> <BODY> <DIV CLASS="block"> <DIV CLASS="haupt" OnMouseOver="MenueAuf('Menue')" OnMouseOut="MenueZu('Menue')">Private HPs &gt;&gt;</DIV> <DIV CLASS="unter" ID="Menue" OnMouseOver="MenueAuf('Menue')" OnMouseOut="MenueZu('Menue')"> <A HREF="http://google.de">Asta</A><BR> <A HREF="http://microsoft.com">Steffi</A><BR> <A HREF="http://sun.com">Mona</A><BR> <A HREF="http://apple.com">Franzi</A><BR> <A HREF="http://w3.org">Christina</A><BR> </DIV> </DIV>


    Nun:
    Wie krieg ich es hin, dass beim onMouseOver zum einen den Button gewechselt wird und zum anderen sich das Menü ausklappt (Hintergrundfarbe "red", Schriftfarbe "white", Arial, 12pt) und bei onMouseOut das ganze rückgängig gemacht wird?
    Danke
     
    Taron, Sep 4, 2006
    #1
Thread Status:
Not open for further replies.

Share This Page