Seite 1 von 1

Animierten Button mit 2 Zuständen in eigene Seiten einbauen

Verfasst: 13.02.2011 13:41
von jue
Hallo!

Ich nutze dieses tolle Forum, um auch eigene Seiten zu veröffentlichen.

Beim Einbau von animierten Buttons, wie z.B. dem "Neues Thema" Button oder dem "ändern" Button oder dem "x" für Löschen Button scheitere ich bisher kläglich. Im Imageset existiert dafür immer ein Animationssymbol, wie z.B. die GIF-Datei icon_edit_post.gif. Nur, welchen Code muß ich wo einbauen, damit entsprechend der Funktion entweder der gedrückte oder der nicht gedrückte Zustand angezeigt wird. Bei mir werden diese beiden Bilder immer nur übereinander angezeigt.

Ich hoffe, daß ich mit dieser Frage im richtigen Thread bin. Bisher habe ich versucht, Seiten soweit zurückzubauen, bis diese Funktion übrigbleibt, in Foren und MOD-Datenbanken gesucht, gegoogelt, im englischen Forum phpBB.com gesucht, alles hilft nicht. Kann mir hier vielleicht jemand den entscheidenden Tip geben?

Ich hoffe...

Freundliche Grüsse,

jue

Re: Animierten Button mit 2 Zuständen in eigene Seiten einba

Verfasst: 15.02.2011 21:06
von o_spacy_o
Hallo,
du möchtest also die Mausposition abfragen und anhand dieser Bild 1 oder Bild 2 zeigen. Richtig?

Dann versuchs mal mit der CSS Eigenschaft "hover".
http://www.css4you.de/hover.html

Mit dieser kannst du die Bilder tauschen...ganz ohne Programmierung :wink:

spacy

Re: Animierten Button mit 2 Zuständen in eigene Seiten einba

Verfasst: 15.02.2011 22:54
von Frank1604
Wobai das Bild für die Buttons bei phpBB nicht getauscht, sondern nur verschoben wird, aber ebenfalls über den :hover Selektor.

Re: Animierten Button mit 2 Zuständen in eigene Seiten einba

Verfasst: 18.02.2011 19:35
von jue
GELÖST!!!

Hallo!

Zunächst einmal vielen Dank für die Hinweise. Der Hinweis auf die CSS Eigenschaft 'hover' hat mich noch einmal in den CSS Dateien suchen lassen. Letzten Endes ist mir dann in der buttons.css folgende Zeile ziemlich am Ende der Datei aufgefallen:

ul.profile-icons li.edit-icon

profile liess mich auf Vorgänge schließen und richtig:

Als ich in meine html-template-Datei Folgendes einbaute:

<ul class="profile-icons">
<li class="edit-icon"><a href="{memberrow.U_EDIT}" title="{L_EDIT_ITEM}"><span>{L_EDIT_ITEM}</span></a></li>
</ul>

({L_EDIT_POST} in {L_EDIT_ITEM} von mir geändert, um aus 'Ändere Beitrag' 'Eintrag ändern' zu machen)

funktionierte plötzlich der hover Effekt der Buttons und das interne Verschieben der Draufsicht auf dieses Doppelbild.

Eigentlich gar nicht so schwierig, aber:

Manchmal sieht man eben den Wald vor lauter Bäumen nicht.

Nochmals vielen Dank für Eure Hilfe!!!

Wer noch fragen dazu hat, ich helfe natürlich auch gerne weiter...

LG, jue