Ergebnis 1 bis 6 von 6

Thema: Broblem mit hover Buttons

  1. #1
    Ratze
    Gast

    Standard Broblem mit hover Buttons

    Hi, ich habe ein Problem mit meiner Homepage, die noch nicht online ist, daher beschreibe ich es mal ganz kurz: Ich hätte gerne Hover Buttons als headnavigation. Wenn ich den entsprechenden Code einfüge wird der Home link allerdings als hover angezeigt, der about me Link gar nicht angezeigt, der News Link funktioniert dann wieder und gbook sowie this site werden wieder nicht angezeigt. Wenn ich allerdings einmal mit der Maus über alle Links gefahren bin funktioniert alles perfekt. Hier der Code, den ich verwendet habe:
    Code:
    <tr>
    		<td rowspan="5">
    			[img]Bilder/Fertigehp_02.gif[/img]</td>
    		<td>
    			<a href="http&#58;//www.test.de" onMouseOver="home.src='Bilder/home.gif';"onMouseOut="home.src='Bilder/fertigehp_03.gif';"> 
                [img]Bilder/home.gif[/img]</a></td>
    		<td>
    			<a href="http&#58;//www.test2.de" onMouseOver="about.src='Bilder/abo.gif';"onMouseOut="about.src='Bilder/fertigehp_04.gif';"> 
                [img]fertigehp_04.gif[/img]</a></td>
    		<td>
    			<a href="http&#58;//www.test3.de" onMouseOver="news.src='Bilder/news.gif';"onMouseOut="news.src='Bilder/fertigehp_05.gif';"> 
                [img]Bilder/fertigehp_05.gif[/img]</a></td>
    		<td>
    			<a href="http&#58;//www.test4.de" onMouseOver="gbook.src='Bilder/gbook.gif';"onMouseOut="gbook.src='bilder/fertigehp_06.gif';"> 
                [img]fertigehp_06.gif[/img]</a></td>
    		<td colspan="3" rowspan="2">
    			[img]Bilder/Fertigehp_07.gif[/img]</td>
    		<td>
    			<a href="http&#58;//www.test5.de" onMouseOver="site.src='bilder/site.gif';"onMouseOut="site.src='bilder/fertigehp_08.gif';"> 
                [img]/fertigehp_08.gif[/img]</td>
    		<td rowspan="5">
    			[img]Bilder/Fertigehp_09.gif[/img]</td>
    	</tr>
    Ich habe den Code mehrmals kontrolliert, jedoch keine Fehler gefunden. Kann mir jemand von euch vielleicht sagen, was ich falsch mache? Würde mich sehr über antwort freuen
    MFG Razor
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Interessierte/r
    Registriert seit
    21.09.2006
    Beiträge
    142
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    JavaScript ist eh Müll!

    Aber sorry. Wollte keinen unkonstruktiven Beitrag leisten.

    Wo ich grad' mal am kritisieren bin. Der Internet Explorer ist auch Müll

  3. #3
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Das liegt an deiner Internetverbindung, bzw. an der Geschwindigkeit deines Webspace. Die Hover-Grafiken werden ja erst vom Server geladen, wenn du mit der Mouse drüber gehst. Beim 2. Versuch sind sie dann im Browsercache und von daher werden sie sofort angezeigt.

    Lösung: Die Hover-Grafiken vorladen, z.B. indem sie irgendwo schon unsichtbar eingebaut werden - oder eben per Javascript.

    Vermutlich gibt es für dein Problem aber eine elegantere Lösung mit Stylesheets, dafür müßte man die HP aber einmal online ansehen.

    G.a.d.M.

    Ronald

  4. #4
    Ratze
    Gast

    Standard hmm..

    Danke für den Tipp, aba mit Javascript wird das ganze falsch angezeigt, und mit css bekomme ich nicht mehrere Buttons hin. Bzw. ich weiss nicht, wie das geht. Der CSS Quelltest sieht so aus:

    Code:
    <style type="text/css">
    
      a         &#123; display&#58;block;
                 background-image&#58;url&#40;Bilder/fertigehp_03.gif&#41;;
                 width&#58;97px; height&#58;25px &#125;
    #home&#58;hover &#123; background-image&#58;url&#40;Bilder/home.gif&#41;; &#125;
    
      a         &#123; display&#58;block;
                 background-image&#58;url&#40;Bilder/fertigehp_04.gif&#41;;
                 width&#58;167px; height&#58;25px &#125;
    #abo&#58;hover &#123; background-image&#58;url&#40;Bilder/abo.gif&#41;; &#125;
     
      a         &#123; display&#58;block;
                 background-image&#58;url&#40;Bilder/fertigehp_05.gif&#41;;
                 width&#58;108px; height&#58;25px &#125;
    #news&#58;hover &#123; background-image&#58;url&#40;Bilder/news.gif&#41;; &#125;
    
      a         &#123; display&#58;block;
                 background-image&#58;url&#40;Bilder/fertigehp_06.gif&#41;;
                 width&#58;120px; height&#58;25px &#125;
    #gbook&#58;hover &#123; background-image&#58;url&#40;Bilder/gbook.gif&#41;; &#125;
    
      a         &#123; display&#58;block;
                 background-image&#58;url&#40;Bilder/fertigehp_08.gif&#41;;
                 width&#58;144px; height&#58;25px &#125;
    #site&#58;hover &#123; background-image&#58;url&#40;Bilder/site.gif&#41;; &#125;
    </style>
    Und so hab ichs dann eingebunden:

    Die Frage ist nur, wie sollen sich die einzelnen Buttons unterscheiden??
    Wenn mir das jemand sagen könnte müsste ichs hinbekommen. [/code]

  5. #5
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Re: hmm..

    MoiN!

    Du kannst dafür Individualformate oder aiuch Klassen verwenden, je nach dem, ob die Button den gleichen Hintergrund verwenden oder unterschiedliche. Du kannst das ganze auch mischen, ich zeig's dir mal:

    Code:
    <html>
    <head>
    
    <style type="text/css">
    <!--
    a#button1  &#123;display&#58;block;width&#58;97px;height&#58;25px;background-image&#58;url&#40;bilder/button1_n.gif&#41;;border&#58;thin outset;&#125;
    a#button1&#58;hover, a#button1&#58;focus  &#123;background-image&#58;url&#40;bilder/button1_h.gif&#41;;&#125;
    a#button1&#58;active  &#123;background-image&#58;url&#40;bilder/button1_h.gif&#41;;border&#58;thin inset;&#125;
    
    a#button2  &#123;display&#58;block;width&#58;97px;height&#58;25px;background-image&#58;url&#40;bilder/button2_n.gif&#41;;border&#58;thin outset;&#125;
    a#button2&#58;hover, a#button2&#58;focus  &#123;background-image&#58;url&#40;bilder/button2_h.gif&#41;;&#125;
    a#button2&#58;active  &#123;background-image&#58;url&#40;bilder/button2_h.gif&#41;;border&#58;thin inset;&#125;
    
    a#button3  &#123;display&#58;block;width&#58;97px;height&#58;25px;background-image&#58;url&#40;bilder/button3_n.gif&#41;;border&#58;thin outset;&#125;
    a#button3&#58;hover, a#button3&#58;focus  &#123;background-image&#58;url&#40;bilder/button3_h.gif&#41;;&#125;
    a#button3&#58;active  &#123;background-image&#58;url&#40;bilder/button3_h.gif&#41;;border&#58;thin inset;&#125;
    -->
    </style>
    </head>
    <body>
    <div class="links">
    
    
    
    </div>
    </body>
    </html>
    Das erzeugt drei Button untereinander, jeder Button hat seine eigenen Grafiken für normal, hover, pp. Erreicht wird das ganze durch Individualformate, erkennbar an der Raute. Sie greift auf ID-Tags zu. Versuche das erstmal zu verstehen und lege dir dann später entsprechende Grafiken an, bzw. benenne die Stylesheets entsprechend deiner Grafiken um.

    Bevor du das jedoch machst, füge bitte erst einmal zum Testen in das Script noch folgenden Stylesheets ein:
    Code:
    .links, .links a&#58;link &#123;background-color&#58;#FFFFDD;width&#58;97px;border&#58; thin sold #9F9F9F;&#125;
    .links a&#58;hover &#123;background-color&#58;#00E090;width&#58;97px;border&#58; thin sold #9F9F9F;&#125;
    .links a&#58;active &#123;background-color&#58;#00009F;width&#58;97px;border&#58; thin sold #9F9F9F;&#125;
    Stylesheets, die mit einem Punkt beginnen, sind Klassen. Sie werden etwas anders verwaltet, das "a" steht nun hinten. Diese Klassenstyles färben dir eigentlich nur den Hintergrund ein - ohne die Individualstyles würden sie gar nichts bewirken. Im Beispiel habe ich jetzt also zwei verschiedene Arten Stylesheets kombiniert und dadurch einen völlig anderen Effekt erreicht.

    Du kannst ja mal ein wenig damit herumspielen - learning by doing bringt mir immer am meisten.

    G.a.d.M.

    ronald

  6. #6
    Ratze
    Gast

    Standard :)

    Damit kann ich was anfangen, danke. Jez bekomm ich endlich meine buttons hin.

    Wenn ich fertig bin sag ich ma bescheid, dann könnt ihrs euch ja ma ansehn.

Ähnliche Themen

  1. hover
    Von gast im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 24.10.2007, 09:30
  2. Hover
    Von Prinz im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.05.2007, 21:44
  3. a hover....
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 11.04.2007, 16:50
  4. Hover Links??
    Von gast im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.09.2005, 13:40
  5. Hover?
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 22.08.2004, 23:50

Stichworte

Berechtigungen

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