Ergebnis 1 bis 1 von 1
  1. #1
    Avatar von CRDesign
    CRDesign ist offline Jungspund
    registriert
    28-12-2004
    Beiträge
    10

    Highlight Menu (JavaScript)

    1) Zuerst werden zwei Bilder Gemacht:
    1.1) Dieses wird dann später im Menu immer angezeigt: home1 (Unter der Zeile "Hinweis:...")
    1.2) Und dieses wird eingeblendet, wenn man mit der Maus über das erste Bild "fährt": home2 (Unter der Zeile "Hinweis:...")


    2) Dann brauchen wir den JavaScript Code:
    Der Code besteht aus zwei Teilen:
    2.1) Der erste Teil ist im Head zu finden (einzubinden) und sieht so aus:
    HTML-Code:
    <script type="text/javascript">
    <!--
    Normal1 = new Image();
    Normal1.src = "pics/menu/home1.gif";     
    Highlight1 = new Image();
    Highlight1.src = "pics/menu/home2.gif"; 
    
    Normal2 = new Image();
    Normal2.src = "pics/menu/crdesign1.gif";     
    Highlight2 = new Image();
    Highlight2.src = "pics/menu/crdesign2.gif"; 
    
    Normal3 = new Image();
    Normal3.src = "pics/menu/projekte1.gif";     
    Highlight3 = new Image();
    Highlight3.src = "pics/menu/projekte2.gif"; 
    
    function Bildwechsel(Bildnr,Bildobjekt) {
     window.document.images[Bildnr].src = Bildobjekt.src;
    }
    //-->
    </script>
    Erklärung:
    Bei Normal1.src = "pics/menu/home1.gif"; Normal2.src = "pics/menu/crdesign1.gif";
    Normal3.src = "pics/menu/projekte1.gif"; werden die Links zu den Bildern aus 1.1 angegeben.
    Bei Highlight1.src = "pics/menu/home2.gif"; Highlight2.src = "pics/menu/crdesign2.gif";
    Highlight3.src = "pics/menu/projekte2.gif"; werden die Links zu den Bildern aus 1.2 angegeben.

    2.2) Der zweite Teil wird direkt bei den Links eingebunden und das sieht so aus:
    HTML-Code:
    <a href="home.html" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
    <img src="pics/menu/home1.gif" width="100" height="15" border="0" alt="Home"></a><br>
    
    <a href="crdesign.html" onMouseOver="Bildwechsel(1,Highlight2)" onMouseOut="Bildwechsel(1,Normal2)">
    <img src="pics/menu/crdesign1.gif" width="100" height="15" border="0" alt="Artists"></a><br>
    
    <a href="projekte.html" onMouseOver="Bildwechsel(2,Highlight3)" onMouseOut="Bildwechsel(2,Normal3)">
    <img src="pics/menu/projekte1.gif" width="100" height="15" border="0" alt="Downloads"></a><br>
    Erklärung:
    Das onMouseOver=... onMouseOut=... Tag ist hier wichtig, es ist für den Bildwechsel (Highlight) zuständig. Bei mehr als drei Links, muss die Zahlenreihe einfach weitergeführt werden.
    Bei <img src="pics/menu/home1.gif" width="100" height="15" border="0" alt="Home"> wird dann nochmal das Bild aus 1.1 angegeben, genau so wie wir es uns gewohnt sind.
    Und mit a href=... wird es verlinkt.


    3) Das ganze in einer HTML-Datei sieht dann so aus:
    HTML-Code:
    <head>
    <title>Titel Der Website</title>
    <script type="text/javascript">
    <!--
    Normal1 = new Image();
    Normal1.src = "http://theunaffected.th.funpic.de/pics/menu/home1.gif";     
    Highlight1 = new Image();
    Highlight1.src = "http://theunaffected.th.funpic.de/pics/menu/home2.gif"; 
    
    Normal2 = new Image();
    Normal2.src = "http://theunaffected.th.funpic.de/pics/menu/crdesign1.gif";     
    Highlight2 = new Image();
    Highlight2.src = "http://theunaffected.th.funpic.de/pics/menu/crdesign2.gif"; 
    
    Normal3 = new Image();
    Normal3.src = "http://theunaffected.th.funpic.de/pics/menu/projekte1.gif";     
    Highlight3 = new Image();
    Highlight3.src = "http://theunaffected.th.funpic.de/pics/menu/projekte2.gif"; 
    
    function Bildwechsel(Bildnr,Bildobjekt) {
     window.document.images[Bildnr].src = Bildobjekt.src;
    }
    //-->
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <a href="home.html" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)"><img src="http://theunaffected.th.funpic.de/pics/menu/home1.gif" width="100" height="15" border="0" alt="Home"></a><br>
    <a href="crdesign.html" onMouseOver="Bildwechsel(1,Highlight2)" onMouseOut="Bildwechsel(1,Normal2)"><img src="http://theunaffected.th.funpic.de/pics/menu/crdesign1.gif" width="100" height="15" border="0" alt="Artists"></a><br>
    <a href="projekte.html" onMouseOver="Bildwechsel(2,Highlight3)" onMouseOut="Bildwechsel(2,Normal3)"><img src="http://theunaffected.th.funpic.de/pics/menu/projekte1.gif" width="100" height="15" border="0" alt="Downloads"></a><br>
    </td>
    </tr>
    </table>
    </body>
    Und so kann das Menu auf einer Website aussehen: Menu

    Soooo, nun wäre wohl alles grob erklährt. Wenn jemand Fehler sieht, oder mit meiner Erklärung nicht einverstanden ist, dann meldet euch nur...
    Geändert von CRDesign (20-02-2005 um 19:33 Uhr)

Ähnliche Themen

  1. Was ist JavaScript?
    Von .holger im Forum JavaScript-FAQ
    Antworten: 4
    Letzter Beitrag: 27-11-2006, 10:00
  2. Antworten: 0
    Letzter Beitrag: 22-01-2004, 15:47
  3. window.popup aus flash
    Von antiheld2000 im Forum Flash
    Antworten: 6
    Letzter Beitrag: 18-07-2003, 14:26
  4. JavaScript umändern
    Von Nonens im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 11-04-2002, 11:03

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •