Onmouseover Effekt für Navi

hey alle,
hab mal ne frage,
ich würde gern in der navigationsleiste die buttons mit onmouseover-effekten "beschmücken". Leider weiß ich nicht wie =(.
In den css find ich keinen punkt wo man die buttons einzeln bearbeiten kann.
@henry: suchfunktion heb ich benutzt!
gruß axel

Hallo

Was hast du dir da so vorgestellt?

Was relativ einfach ist, sind Hintergrundfarben (hinter den Buttons), Rahmen und Verschiebungen.

Wenn sich der ganze Button bei hover ändern soll wirds allerdings richtig aufwändig, aber machbar ist es.

---

LG, Alex

hey, danke für deine schnelle antwort =),
ich will das bild austauschen wenn man mit der maus drüber ist:

Code:

 <img src="http://immortal-clan.site90.com/pics/home1.png"
        onmouseover="change1.src='http://immortal-clan.site90.com/pics/home2.png';"
        onmouseout="change1.src='http://immortal-clan.site90.com/pics/home1.png';">


so in etwas funktionierts hier schon http://immortal-clan.site90.com/.
Allerdings find ich in den css keinen punkt wo ich die bilder einzeln editieren kann =(,
gruß axel

Hallo

Naja, das, was du da hast, ist eine reine HTML-Lösung, und die funktioniert nicht über CSS.

Insgesamt ist das für ein Forum eh nicht geeignet, da ja die Buttonreihe variiert, je nachdem, ob man eingeloggt ist oder nicht und welche Rechte man hat. Entweder werden da die entsprechenden Buttons für alle angezeigt oder für gar keinen.

Über CSS funktioniert das so, dass man den eigentlichen Button ohne Aufschrift im CSS als Hintergrundbild definiert und dann die Schrift in einem transparenten gif als eigentlichen Button nimmt.

Das Hintergrundbild (also der Button ohne Schrift) lässt sich dann bei hover (= mouseover) und active (bei Klick darauf, nicht IE) austauschen und dadurch entsteht der Eindruck, dass der ganze Button ein anderer ist.

Diese 2 bzw. 3 Einzelbilder gelten dann als Hintergrund für alle Buttons der Navileiste und werden jeweils vom transparenten GIF überlagert, dass die jeweilige Aufschrift enthält und das dann im Adminbereich ganz normal als Button eingetragen wird.

Im Endeffekt sieht das dann gleich aus, wie bei der HTML-Lösung, nur funktioniert es auch bei jedem bekannten Browser, das mouseover dagegen nicht.

Auf der Seite, die du angegeben hast, da mouseovert zum Beispiel bei mir im FF 3.0.4gar nix

Bei Interesse bitte nochmal hier posten, dann bastel ich das mal zusammen

Dabei dann bitte gleich die URLs von allen Buttons posten, damit ich das dann gleich in Schrift und Hintergrund zerpflücken kann, sowie einen Button, wie das bei hover und evtl. (bei Wunsch) bei Klick aussehen soll.

LG, Alex

erstamal danke für deine antwort =)
hmmm, bei hovert das eigentlich ziemlich gut mim ff (ich denke das nach dem aktuellsten update auch 3.0.4 drauf ist). Also grundsätzlich hab ich mir das so vorgestellt:


mein eigentlicher plan war jetzt das ich eine tauschfunktion in js erstelle und die mit onmouseover,-out aufrufe (url als parameter dann mitgeben). Wenn das nicht geht dann halt über die css Wäre es theoretisch möglich das das transparente gif mit dem schriftzug ausgetauscht wird? wäre praktischer, dann müsste ich nicht die von der homepage neu machen, und die hintergundgrafik hätte ich dann auch schon:

oder alternativ:


Grafik 3 wird von anfang an und bei onmouseout als hintergrund angezeigt, und bei hover grafik 2. Grafik 1 wechselt dann allen anschein nach die schriftfarbe.

Die Grafiken hab ich schnell alle erstellt, wenn das jetzt so geht wie ich mir das vorstell leg ich gleich mal los

Hallo

Das Gif mit der Schrift kann nicht bei hover getauscht werden, sondern eben nur der Hintergrund.

Wenn du die Schrift auch noch ändern willst, dann musst du die Links des Forums in der Navileiste von der Schriftgröße/Art entsprechend einstellen und ganz ohne Buttons arbeiten.

Hinter die Links kannst du dann die Hintergrundgrafiken basteln. Bei deinen Buttons ist das möglich, denn die kann man auch über CSS definieren. (Kachelndes Hintergrundbild und Rahmen drumrum)

Das hätte auch den Vorteil, dass sich die Schrift in den Buttons an die jeweilige Spache anpasst, die im Forum verwendet wird und sich auch die Breite der Buttons an den Inhalt (Länge des Textes) anpasst.

Also eine sehr elegante Lösung.



Bei Interesse an dieser Version bitte kurz melden, denn das kann ich in 10 Minuten erstellen.

---

LG, Alex

hört sich gut an
also die schrift die ich verwende ist arial black (bold, größe 16) --> falls du das brauchst. die schriftfarbe soll sich einfach nur auf gelb wechseln wenn ich mit der maus drüber bin, wenn ich wieder runter gehe soll es wieder schwarz werden (wie oben gezeigt).
Wie das mit der sprachanpassung dann funktioniert kapier ich nochnicht so ganz, aber es hört sich nicht schlecht an .
Wäre wirklich nett wenn du mir das einrichtest - DANKE!!!
Gruß axel

Jo,

du befindest dich in der Warteschleife

Muss vorher noch was anderes fertig machen, weil mir sonst bald jemand ins Genick hüpft

Ich poste das hier, wenn ichs fertig hab.

---

LG, Alex

ok, danke =)

Hallo

Bitte mal

Adminbereich/Anzeige/Startseite/Kopfteil&Navigation

bei "In der Linkleiste nur Bilder anzeigen :" auf "Nein"

setzen und kurz melden, dass ich das testen kann.

---

LG, Alex

erledigt
hast du was an der breite geändert?

Öhm,

von welcher Breite redest du denn? ^^

An deinem Forum hab ich nix verstellt, hab ja keine übersinnlichen Fähigkeiten

---

LG, Alex

die seite is so breit... , naja ich schau da mal nach

O.k.,

die Buttons hab ich gestestet.

Bitte den folgenden Code kopieren und einfügen unter

Adminbereich/Anzeige/Logos&Bilder/Farben/CSS-Stylesheet

in das dortige, große Fenster.

Sollte schon etwas im Fenster stehen dann darunter.

Danach "Annehmen" klicken.

Code:

/* --- Modifikation Alex: Aktive Navigationsbuttons --- */

a.mainmenu img {
   display: none;
   }
a.mainmenu {
   text-decoration: none;
   color : #000000;
   font-weight: bold;
   font-size: 18px;
   font-family: arial black, arial, verdana, tahoma, sans-serif;
   background-image: url("http://i74.servimg.com/u/f74/11/54/72/10/bg_nav10.jpg");
   background-repeat: repeat-x;
   background-attachment: 0% 0%;
   background-color: #fe8a8a;
   border:2px solid #000000;   
   padding: 4px 6px 4px 6px;
   }
a.mainmenu:focus {
   color: #ffff00;
   background-image: url("http://i74.servimg.com/u/f74/11/54/72/10/bg_nav10.jpg");
   text-decoration: none;
   }
a.mainmenu:hover {
   color: #ffff00;
   background-image: url("http://i74.servimg.com/u/f74/11/54/72/10/bg_nav10.jpg");
   text-decoration: none;
   }

/* --- Ende Modifikation --- */

---

LG, Alex

hey, danke sieht toll aus =) !
allerdings wenn ich jetzt auf profil gehe werden die links (einstellungen, signatur...) ebenfalls mit der grafik hinterlegt, schweißt das layout leicht zusammen...

Hmm,

dann muss ich das noch genauer definieren, Momentchen mal...

---

LG, Alex

So, bitte mal testen, ob du noch irgendwo Buttons statt Textlinks hast, nachdem du das hier eingetragen hast (Das von vorher löschen):

/* --- Modifikation Alex: Aktive Navigationsbuttons --- */

a.mainmenu img {
display: none;
}
a.mainmenu {
text-decoration: none;
color : #000000;
font-weight: bold;
font-size: 18px;
line-height: 45px;
whitespace: nowrap;
font-family: arial black, arial, verdana, tahoma, sans-serif;
background-image: url("https://i.servimg.com/u/f74/11/54/72/10/bg_nav10.jpg");
background-repeat: repeat;
background-attachment: 0% 0%;
background-color: #fe8a8a;
border:2px solid #000000;
padding: 4px 6px 4px 6px;
}
a.mainmenu:focus {
color: #ffff00;
background-image: url("https://i.servimg.com/u/f74/11/54/72/10/bg_nav10.jpg");
text-decoration: none;
}
a.mainmenu:hover {
color: #ffff00;
background-image: url("https://i.servimg.com/u/f74/11/54/72/10/bg_nav10.jpg");
text-decoration: none;
}
/* --- Backset andere Nav-Links --- */
.three-col a.mainmenu {
text-decoration: underline;
color : #cc0000;
font-weight: normal;
font-size: 12px;
line-height: 120%;
font-family: verdana, tahoma, sans-serif;
background-color: #000000;
background-image: none;
border:none;
padding: 0px;
}
.three-col a.mainmenu:focus {
color: #ff0000;
background-image: none;
background-color: #000000;
text-decoration: underline;
}
.three-col a.mainmenu:hover {
color: #ff0000;
background-image: none;
background-color: #000000;
text-decoration: underline;
}
/* --- Ende Modifikation --- */

Außerdem muss du noch umstellen, dass die Navi-Bar nicht in einer Zeile angezeigt wird, denn sonst wir das Forum "sehr" breit

---

LG, Alex

funktioniert, super =)
vieeeeeeeeeeeeelen Dank =)=)=)

Jo, büdde

Kopie aber bitte nochmal den Code und ersetz den anderen, denn ich hab noch eine Änderung gemacht, die man man braucht, wenn das in 2 Zeilen dargestellt wird (sonst überlappt es).

Aber sieht schon gut aus und praktisch ist es auch,wenn die Buttons automatisch die Aufschrift wechseln.... werd ich in meinen nächsten Style auch mal einbaun

---

LG, Alex