Broblem mit hover Buttons

Ratze

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://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://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://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://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://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>

Alles anzeigen

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

MeDoP

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

Ronald

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

Ratze

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         { display:block;
             background-image:url(Bilder/fertigehp_03.gif);
             width:97px; height:25px }
#home:hover { background-image:url(Bilder/home.gif); }


  a         { display:block;
             background-image:url(Bilder/fertigehp_04.gif);
             width:167px; height:25px }
#abo:hover { background-image:url(Bilder/abo.gif); }
 
  a         { display:block;
             background-image:url(Bilder/fertigehp_05.gif);
             width:108px; height:25px }
#news:hover { background-image:url(Bilder/news.gif); }


  a         { display:block;
             background-image:url(Bilder/fertigehp_06.gif);
             width:120px; height:25px }
#gbook:hover { background-image:url(Bilder/gbook.gif); }


  a         { display:block;
             background-image:url(Bilder/fertigehp_08.gif);
             width:144px; height:25px }
#site:hover { background-image:url(Bilder/site.gif); }
</style>

Alles anzeigen

Und so hab ichs dann eingebunden:

Code

[url='#'][/url]

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

Ronald

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:

HTML

<html>
<head>


<style type="text/css">
<!--
a#button1  {display:block;width:97px;height:25px;background-image:url(bilder/button1_n.gif);border:thin outset;}
a#button1:hover, a#button1:focus  {background-image:url(bilder/button1_h.gif);}
a#button1:active  {background-image:url(bilder/button1_h.gif);border:thin inset;}


a#button2  {display:block;width:97px;height:25px;background-image:url(bilder/button2_n.gif);border:thin outset;}
a#button2:hover, a#button2:focus  {background-image:url(bilder/button2_h.gif);}
a#button2:active  {background-image:url(bilder/button2_h.gif);border:thin inset;}


a#button3  {display:block;width:97px;height:25px;background-image:url(bilder/button3_n.gif);border:thin outset;}
a#button3:hover, a#button3:focus  {background-image:url(bilder/button3_h.gif);}
a#button3:active  {background-image:url(bilder/button3_h.gif);border:thin inset;}
-->
</style>
</head>
<body>
<div class="links">
[url='#'][/url]
[url='#'][/url]
[url='#'][/url]
</div>
</body>
</html>

Alles anzeigen

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:link {background-color:#FFFFDD;width:97px;border: thin sold #9F9F9F;}
.links a:hover {background-color:#00E090;width:97px;border: thin sold #9F9F9F;}
.links a:active {background-color:#00009F;width:97px;border: thin sold #9F9F9F;}

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

Ratze

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.