Dragonfly_SH
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!
chriscnation
| 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
in irgendeiner Template Datei auf alle fälle, aber welche: ??? schau halt mal..
Dragonfly_SH
Wenn mir jetzt noch jemand sagen könnte, wohin damit... wär schon super!
Danke, erstmal dafür! Damit ist mir schon sehr geholfen.
Schweinebacke
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.
Dragonfly_SH
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.
WDB
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..
Dragonfly_SH
Ok, hier ist die header.tpl
Kann da jemand was machen?
Schweinebacke
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
Dragonfly_SH
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?
Schweinebacke
Hast du den zwei verschiedene Button?
Dragonfly_SH
Klar, sonst könnte man den Unterschied ja nicht sehen.
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?
Schweinebacke
Und wie nennt sich dann der zweite?
Oder habe ich das irgend wo überlesen.
Dragonfly_SH
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.)
Schweinebacke
dann müsste das header-Template so aussehen:
Dragonfly_SH
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?
Schweinebacke
Da es so gehen muss, ja!
Hast du das noch nicht online?
Dragonfly_SH
Doch, habe ich.
Schweinebacke
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äufig gestellte Fragen" title="Hä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> |
|
Dragonfly_SH
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 ?!?!
Schweinebacke
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.