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

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

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

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

Bitte.

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.
Dazu entfernst du das Script und tauschst den HTML-Code dadurch aus:

Code:

<div id="menu"><img src="http://2img.net/i/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;
}

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

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.

Ist das nun für dich in Ordnung?