Lexi Help
Partner
www.forumieren.com

[phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Keine Rückmeldung closed [phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Beitrag von Senaca am Fr 7 Dez 2012 - 15:27

Guten Tag,

meine HTML Kenntnisse sind eher mager, daher wende ich mich nun an euch. Ich möchte gerne Neuigkeiten oder ähnliches auf der Startseite hinter einem Bild verstecken, welches sich bewegt - sich zum beispiel nach rechts verschiebt - wenn die Maus drüber fährt und somit den Text freigibt. Ich habe forumieren Foren mit dieser Anwendung gesehen doch weiß ich leider nicht, wie man das einbaut daher meine Frage wie funktioniert das und wenn die Bearbeitung des CSS nötig, dann was muss eingefügt erden o.ä.

Gruß
Senaca

Senaca
Lehrling
Lehrling

Weiblich Beiträge : 92
Anmeldedatum : 09.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Keine Rückmeldung closed Re: [phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Beitrag von Günther am Fr 7 Dez 2012 - 15:42

Hallo,

ich kann dir mal einen Beispielcode geben.

Der HTML-Code, den du z.B. in ein Modul oder die Startseitennachricht einsetzt, sieht so aus:
Code:
<div id="menu">
<dl>
<dt><img src="BILDADRESSE"></dt>
<dd  style="display:none;">
TEXT
</dd> 
</dl>
</div>
Und das dazugehörige Script, das du dunter
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung
mit der Einstellung
Die Javascript-Code Verwaltung aktivieren: Ja
und dann über einen Klick auf Ein neues Javascript erstellen, mit der Platzierung "Alle Seiten" einsetzt, so:
Code:
$(function(){$("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500")},function(){$(this).find("dd").slideUp("500")})});
Das ist das Grundschema für einen Hovereffekt des Bilder, wodurch dann ein darunterliegender Text angezeigt wird.

Liebe Grüße
Günther

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Keine Rückmeldung closed Re: [phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Beitrag von Senaca am Fr 7 Dez 2012 - 15:58

Guten Tag Günther,

viele dank für Ihre schnelle Antwort, es hat auch wunderbar geklappt. Doch frage ich mich, wie man die Richtung des Verschiebens ändern kann zum beispiel nach rechts oder links. Muss ich dafür den Script ändern oder den HTML Code beim Abschnitt
Code:
<dd  style="display:none;">
?

Gruß
Senaca

Senaca
Lehrling
Lehrling

Weiblich Beiträge : 92
Anmeldedatum : 09.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Keine Rückmeldung closed Re: [phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Beitrag von Günther am Fr 7 Dez 2012 - 16:44

Bitte. Smile

Mit dieser jQuery-Funktion ist das nicht möglich, da jQuery nur vertikale "toggle"-Effekte beinhält. Man müsste deshalb etwas umständlicher scripten - was in diesem Fall nicht nötig ist, da derselbe Effekt etwas handlicher auch mit CSS zu erreichen ist. Wink
Dazu entfernst du das Script und tauschst den HTML-Code dadurch aus:
Code:
<div id="menu"><img src="http://illiweb.com/fa/admin/icones/small_ico/portail.png"><p style="display:none;">
TEXT
</p>
</div>
Anschließend trägst du unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
folgenden Code ein:
Code:
#menu:hover p {
  display: inline !important;
}

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Keine Rückmeldung closed Re: [phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Beitrag von Senaca am Fr 7 Dez 2012 - 19:57

Guten Abend,

also kann ich mit dem Code im CSS die Richtung des Verschiebens ändern? Leider kenne ich mich mich mit den Begriffen in HTML nicht aus, doch versuche ich mal selber ob es klappt. Ich bedanke mich nochmals für die Hilfe.

Gruß
Senaca

Senaca
Lehrling
Lehrling

Weiblich Beiträge : 92
Anmeldedatum : 09.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Keine Rückmeldung closed Re: [phpBB2] Bild verschiebt sich wenn Maus drüberfährt

Beitrag von Günther am Fr 7 Dez 2012 - 20:07

Durch die Umsetzung, die ich dir nun beschrieben habe, würde der Text beim Hovern der Grafik nicht mehr darunter, sondern rechts daneben angezeigt. Das wäre also im Grunde derselbe Effekt, aber auf horizintaler Ebene. Wink

Ist das nun für dich in Ordnung? Smile


Zuletzt von Zuckerpuppe am Mi 12 Dez 2012 - 11:11 bearbeitet, insgesamt 1 mal bearbeitet (Grund : keine Rückmeldung, daher ist das Thema geschlossen)

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten