• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover Effekte als Menüsteuerung

  • Ersteller Ersteller One Man Production
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
O

One Man Production

Guest
Hallo html brüder:mrgreen:

Ich bin neu hier bei HTML.de und hab auch gleich eine Frage an euch.
Unswar muss ich wissen, wie man Mouseover Effekte auf der Homepage darstellt. Ich will sie für die Menü Navigation benutzen.
Das ich zwei verschiedene gleichgrosse Bilder dafür brauche weis ich schon^^ aber nur wie ich sie einbinden soll und wie der Code dafür lauten soll, das macht mir schwierigkeiten. Und ich will erreichen, das beim Click auf einen Button z.b. Startseite dieser Button in einer dritten Farbe makiert bleibt.
Und wenn ich auf einen anderen Button klicke soll der Button Startseite wieder in seine Anfangsfarbe zurück und der Button den ich anklicke dann halt wieder in dieser 3. Farbe Ausgegeben wird.


Ich hoffe ihr könnt mir bei meiner Frage weiterhelfen bin echt am verzweifeln.
 
HTML: 
<html>
	<head>
		<style>
			body {background-color: #000000;}
			div.navi_div         {background-image: url(./button1.jpg); height: 25px; width: 100px;}
			div.navi_div:hover   {background-image: url(./button2.jpg); height: 25px; width: 100px;}
			a.navi_a         { text-decoration: none; position: relative;top:5px;left:15px; color:#ffffff;}
			a.navi_a:visited { text-decoration: none; position: relative;top:5px;left:15px; color:#ffffff;}
			a.navi_a:hover   { text-decoration: none; position: relative;top:5px;left:15px; color:#ffffff;}
		</style>
	</head>
	<body>
		<div class="navi_div" onclick="location.href='hover.htm'"><a class="navi_a" href="hover.htm">Home</a></div>
	</body>
</html>
Das eigentliche Script ist mit CSS gemacht und deswegen verschiebe ich das auch in dieses Unterforum. Deine beiden Bilder müssen, wenn du es im Code nicht veränderst button1.jpg und button2.jpg heißen und im selben Verzeichniss wie deine HTML-Datei liegen. Darüber liegt jetzt ein einfacher Link. Habe das einfach einmal angehängt, eifnach entpacken und die .html-Datei mit Firefox öffnen.

Gruß Corvulus

PS: Beim Interrnet Explorer klappt das ganze leider nicht, obwohl der Hover Effekt offizieller Bestandteil von CSS ist.
 

Anhänge

Vielen Dank für die superschnelle Antwort^^.
Aber ist das mit Javascript nicht übersichtlicher und einfacher?
Und wie macht man das mit der Dritten Grafik wenn man auf den Button klickt. Der soll dann diese Dritte Grafik behalten bis ich auf einen anderen Button in der Menüleiste Klicke.
Hat da vielleicht jemand ne ahnung wie man das macht?
 
Das kansnt du mit PHP machen. Kann auch sein, dass das mit dem CSS Element active geht. Mit JS habe ich noch nie gearbeitet, das kann ich dir leider nicht sagen. Bei einem PHP Script kann ich aber sicherlich behilflich sein.

Gruß Corvulus
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben