YourWBB

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Hover - Picture change

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

7.327 Views | | Thema zu Favoriten hinzufügen

Seiten (2): [1] 2 nächste »

Neues Thema erstellen Antwort erstellen

Hover - Picture change

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Hover - Picture change

Antworten Zitieren Editieren Melden UP

Hallo!

Ich möchte die top Menüleiste oben ein bisschen aufpeppen und dynamischer gestalten. Dazu fiel mir ein, einen Hover-Effekt zu verwenden. Ich würde es jetzt gerne so realisiseren, dass - wenn ich mit der Mouse über den Button fahre - das Bild wechselt (z.B. vorher ein Button mit weißer Schrift, beim drüberfahren ein Button mit gelber Schrift).

Ich habe das mal auf einer Homepage gesehen und meine mich erinnern zu können, dass es mit JavaScript gemacht wurde.

Weiß jemand, welchen Code ich da nehmen müsste (die 1. Bildlink und 2.Bildlink einfach irgendwie benennen.) ???

Außerdem würde ich gerne wissen, in welcher Datei ich das dann einfügen muzss (wbb2). Ich hab in dem Datenhaufen nicht so den Überblick.

Vielen Dank!

05.05.07 14:32

E-Mail Finden Als Freund hinzufügen

chriscnation chriscnation ist männlich

Mitglied

Dabei seit: 15.02.07
Beiträge: 10
Herkunft: Nürnberg
Forenversion: Lite 1.0

Antworten Zitieren Editieren Melden UP

code:
1:	<IMG SRC="Normales Bild" WIDTH=?? HEIGHT=?? ALT="" onmouseover="this.src='Hover Bild';" onmouseout="this.src='Normales Bild';">

für Normales Bild und Hover Bild die Bild URL angeben... und Width und Height noch angeben. Kannst du aber weglassen, wenn die Bildgröße mit der, der orginalen Übereinstimmt.

wo du das umändern musst, weis ich auch nicht Augenzwinkern

in irgendeiner Template Datei auf alle fälle, aber welche: ??? schau halt mal..

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von chriscnation: 05.05.07 15:03.

05.05.07 15:01

E-Mail WWW Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Wenn mir jetzt noch jemand sagen könnte, wohin damit... wär schon super! großes Grinsen

Danke, erstmal dafür! Damit ist mir schon sehr geholfen.

05.05.07 15:17

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Natürlich dort wo deine Buttons drin sind. Im Normalfall im header-Templat.

Wenn die onmouseover-Buttons zu viel kb haben, sollte man sie vorladen.

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Schweinebacke: 05.05.07 19:55.

05.05.07 16:46

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Also, die header.tpl habe ich eben gefunden. Das Problem ist nur, dass ich mich nicht besonders gut damit auskenne. Da steht noch soviel anderes drumherum.

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Dragonfly_SH: 05.05.07 17:59.

05.05.07 17:44

E-Mail Finden Als Freund hinzufügen

WDB

Mitglied

Dabei seit: 30.04.07
Beiträge: 134
Herkunft: Oberhausen
Forenversion: Lite 1.0

Antworten Zitieren Editieren Melden UP

Nix mit formatieren.. Häng' deine ganz normale Header.TPL mal als Anhang an und änder' daran nichts. Halt die ganz normale ohne irgendwelchen Formationen..

05.05.07 17:57

E-Mail WWW Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Ok, hier ist die header.tpl Freude

Kann da jemand was machen?

Dateianhang:

header.tpl (4 KB, 7 mal heruntergeladen)

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Dragonfly_SH: 05.05.07 18:00.

05.05.07 17:59

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Das bekommst du auch selber in.

Ich hoffe das du deine Buttons schon soweit hast. Alle in das wbb/ images Verzeichnis laden.

Dann in jedes img-Tag das maushover einbauen.

Sieht dann in etwa so aus:

code:

1:

<a href="usercp.php{$SID_ARG_1ST}"><img src="{$style['imagefolder']}/top_usercp.gif" border="0" alt="{$lang->items['LANG_GLOBAL_USERCP']}" title="{$lang->items['LANG_GLOBAL_USERCP']}" onmouseover="this.src='{$style['imagefolder']}/top_usercp_m.gif'" onmouseout="this.src='{$style['imagefolder']}/top_usercp.gif'" /></a>

Das ist der Button der als erstes angezeigt wird.

src="{$style['imagefolder']}/top_usercp.gif"

den verwendest du wieder bei onmouseout="this.src=

onmouseout="this.src='{$style['imagefolder']}/top_usercp.gif'"

für das onmouseover brauchst du einen neuen – in meinem Beispiel top_usercp_m.gif.

da es vom gleichen style aus dem gleichen Verzeichnis kommt das {$style['imagefolder']}/ davor setzen.

onmouseover="this.src='{$style['imagefolder']}/top_usercp_m.gif'"

nur auf die Ausführungszeichen achten

05.05.07 19:55

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Leider funktioniert das nicht. Ich hab's genauso wie du es oben erklärt hast für erstmal diesen einen Button übernommen (nur aus dem _m ein _mo gemacht), um es zu testen. Habe es sogar im Firefox und IE laufen lassen - alles wie gehabt; Standardanzeige.

Mh...woran kann's liegen?

05.05.07 20:21

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Hast du den zwei verschiedene Button?

05.05.07 20:23

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Klar, sonst könnte man den Unterschied ja nicht sehen. großes Grinsen

Der erste ist schwarz/weiß der zweite schwarz/pink. Ist der identische Button, bloß umgefärbt. Dieser befindet sich auch im selben Ordner und ist korrekt gelinkt.

'ne Idee?

05.05.07 20:28

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Und wie nennt sich dann der zweite?

Oder habe ich das irgend wo überlesen.

05.05.07 20:39

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Der erste trägt den Namen top_usercp.gif und den zweiten habe ich top_usercp_mo.gif getauft (habe ich natürlich auch im Code angepasst.)

05.05.07 20:50

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

dann müsste das header-Template so aussehen:

Dateianhang:

header.tpl (6 KB, 9 mal heruntergeladen)

05.05.07 20:55

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Ja, genauso sieht sie auch aus. Ich habe meine Daten jetzt sogar probeweise mit deiner tpl-Datei überschrieben und na ja.. erfolglose Sache.

Da gehen dir wohl jetzt auch die Ideen aus?

05.05.07 21:01

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Da es so gehen muss, ja!

Hast du das noch nicht online?

05.05.07 21:13

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Doch, habe ich.

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Dragonfly_SH: 05.05.07 22:06.

05.05.07 21:18

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Sorry,

dort gibt es laut Quelltext kein maushover und auch kein top_register_mo.gif.

Auszug

code:

1:
2:
3:
4:
5:
6:
7:
8:

 <td align="center"><span class="smallfont"><a href="register.php"><img src="images/top_register.gif" border="0" alt="Registrierung" title="Registrierung" /></a>
     <a href="calendar.php"><img src="images/top_calendar.gif" border="0" alt="Kalender" title="Kalender" /></a>
     <a href="memberslist.php"><img src="images/top_members.gif" border="0" alt="Mitgliederliste" title="Mitgliederliste" /></a>
     <a href="team.php"><img src="images/top_team.gif" border="0" alt="Teammitglieder" title="Teammitglieder" /></a>
     <a href="search.php"><img src="images/top_search.gif" border="0" alt="Suche" title="Suche" /></a>
     <a href="misc.php?action=faq"><img src="images/top_faq.gif" border="0" alt="H&auml;ufig gestellte Fragen" title="H&auml;ufig gestellte Fragen" /></a>
     <a href="index.php"><img src="images/top_start.gif" border="0" alt="Zur Startseite" title="Zur Startseite" /></a>
     </span></td>

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Schweinebacke: 05.05.07 22:09.

05.05.07 21:26

E-Mail Finden Als Freund hinzufügen

Dragonfly_SH
Mitglied

Dabei seit: 08.11.06
Beiträge: 23

Themenstarter Thema begonnen von Dragonfly_SH

Antworten Zitieren Editieren Melden UP

Dass das Register keinen mousehover-effect haben soll, ist korrekt (sieht man als registrierter User ja auch nicht)! Das war eben so beabsichtigt. Aber die anderen alle sollen sich verändern und da sind auch alle _mo -Dateien vorhanden.

Ich frage mich aber gerade, welche header.tpl du da rausgefischt hast! Da steht ja nicht dieser ganze Zwirbelkram drumherum und das ist auch nicht die, die ich verändert habe ?!?! verwirrt

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Dragonfly_SH: 05.05.07 21:34.

05.05.07 21:33

E-Mail Finden Als Freund hinzufügen

Schweinebacke Schweinebacke ist männlich

Mitglied

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden UP

Aus dem Template wird über die php der Quelltext.

Steht dort nichts drin, erscheint auch nicht.

Hast du das Template im ACP verändert, oder hochgeladen?

Die anderen Buttons gibt es, habe da einfach ein einzelnes erwischt.

05.05.07 21:40

E-Mail Finden Als Freund hinzufügen

Seiten (2): [1] 2 nächste »

Baumstruktur | Brettstruktur

Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » Hover - Picture change