Lexi Help
Die neuesten Themen
» Impressum
von #Frank Gestern um 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Gestern um 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Gestern um 22:07

» Themen-Icons
von Bigtuber Gestern um 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Gestern um 20:09

» Themen fixieren
von inde Gestern um 20:05

» [Update] Neues Theme der mobilen Version V2
von inde Gestern um 13:34

» Mein altes Forum zurückbekommen
von Bigtuber Di 27 Sep 2016 - 19:18

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

Partner
free forum

Onmouseover Effekt für Navi

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Admin bearbeitet Onmouseover Effekt für Navi

Beitrag von Axel am Fr 5 Dez 2008 - 17:34

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

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Fr 5 Dez 2008 - 18:35

Hallo Smile

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 Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am Sa 6 Dez 2008 - 12:02

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

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am So 7 Dez 2008 - 4:40

Hallo Smile

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 Wink

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

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 Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am So 7 Dez 2008 - 11:58

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

1. 2. 3.

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 Wink


Zuletzt von Axel am So 7 Dez 2008 - 12:00 bearbeitet, insgesamt 1 mal bearbeitet (Grund : verbessert o_O)

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am So 7 Dez 2008 - 14:20

Hallo Smile

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. Wink



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




LG,
Alex Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am So 7 Dez 2008 - 14:30

hört sich gut an Wink
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 Very Happy.
Wäre wirklich nett wenn du mir das einrichtest - DANKE!!!
Gruß axel

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am So 7 Dez 2008 - 16:24

Jo,

du befindest dich in der Warteschleife Wink

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

Ich poste das hier, wenn ichs fertig hab.













LG,
Alex Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am So 7 Dez 2008 - 16:28

ok, danke =)

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Mi 10 Dez 2008 - 15:42

Hallo Smile

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 Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am Mi 10 Dez 2008 - 18:50

erledigt Wink
hast du was an der breite geändert?

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Mi 10 Dez 2008 - 19:13

Öhm,

von welcher Breite redest du denn? ^^

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








LG,
Alex Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am Mi 10 Dez 2008 - 19:17

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

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Mi 10 Dez 2008 - 19:25

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 Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am Mi 10 Dez 2008 - 19:31

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...

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Mi 10 Dez 2008 - 19:33

Hmm,

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








LG,
Alex Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Mi 10 Dez 2008 - 19:56

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("http://i74.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("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;
}
/* --- 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 Wink



LG,
Alex Cool


Zuletzt von Alex am Mi 10 Dez 2008 - 20:52 bearbeitet, insgesamt 1 mal bearbeitet

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Axel am Mi 10 Dez 2008 - 20:22

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

Axel
Lehrling
Lehrling

Männlich Beiträge : 115
Anmeldedatum : 10.08.08

Nutzerprofil anzeigen

Nach oben Nach unten

Admin bearbeitet Re: Onmouseover Effekt für Navi

Beitrag von Alex am Mi 10 Dez 2008 - 20:25

Jo, büdde Smile

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 Smile








LG,
Alex Cool

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten