[gelöst] Bild und dann Text on mouseover
Eingetragen von deelite (468)am 09.10.2010 - 16:00 Uhr in
Hallo,
ich suche ein Modul oder eine andere Möglichkeit, Text anzuzeigen, der "unter" einem Bild liegt.
Es soll also ein Bild gezeigt werden, und bei mouseover soll es in Text wechseln. Der Text und das Bild sind Felder eines Inhaltstyps.
Kann mir hierzu jemand einen Tipp geben?
- Anmelden oder Registrieren um Kommentare zu schreiben
Per CSS
am 09.10.2010 - 17:48 Uhr
Sollte per CSS gehen, in etwa:
.deine-klasse { width: xx; height: xx; text-indent: -9999px; background: transparent url(pfad-zum-bild) 0 0 no-repeat; }.deine-klasse:hover { width: xx; height: xx; text-indent: 0; background-image: none; }
Das heißt zunächst wird der Text zur Seite geschoben und das Bild erscheint als Hintergrundbild. Bei einem Hover erscheint das Bild nicht mehr, stattdessen steht der Text da. das sollte funktionieren, wenn die Bilder alle gleich groß sind, damit width und height im CSS fest sind.
Andere CSS-Möglichkeit mit einem div-Container um Text und Bild:
div.container .text { display: none; }div.container .bild { display: block; }
div.container:hover .text { display: block; }
div.container:hover .bild { display: none; }
Ohne Angaben zur Größe wird das aber unschön hin- und herspringen, wenn darunter noch Inhalte kommen.
Ansonsten geht es immer auch per jQuery.
Hallo Nicolai, vielen Dank
am 21.10.2010 - 14:29 Uhr
Vielen Dank für Deine Mühe, Nicolai und sorry wegen der späten Antwort.
Nach einigem Hin und Her hab ich jetzt eine Lösung per CSS gefunden, allerdings muss ich da noch ein paar Browser befragen...
Falls also noch jemand nach solch einer Lösung sucht - hier mal ein erster Ansatz:
Ich habe das betreffende Bild und den Text als Felder in einem Inhaltstyp. Um die Felder im Quelltext ansprechen zu können, benötigt man deren genaue Bezeichnung innerhalb Drupals. Die bekommt man mit http://drupal.org/project/devel_themer.
Für das Bild habe ich einen DIV, welcher genau so groß ist, wie das Bild selbst. Dort rein lege ich das Bild als Hintergrundbild mit:
<?phpprint '<div class="proj_ov" style="background:url(' . base_path() . $fields['field_thumb_cd_fid']->content . ') no-repeat;">';
?>
rein. Damit erreiche ich, dass ich ein Bild aus einem Inhaltstyp als Hintergrundbild verwenden kann. Im Inhaltstyp darf das Bild dann allerdings nicht auf "Bild" sondern auf "Pfad" gestellt sein.
Ich könnte das Bild auch als normales Bild an sich da rein setzen, allerdings ist diese Lösung hier noch nicht der Weisheit letzter Schluss. Ich suche noch nach einer Lösung, wie ich dann per CSS das Bildergrundbild bei hover wieder verschwinden lassen kann (kann mir jemand sagen, wie ich das in der CSS-Datei realisiere?).
Aber weiter im Text...
In diesen Div lege ich dann einen weiteren identischer Größe. Diesen stelle ich per:
opacity: 0.0;"unsichtbar".
Im Zustand hover stelle ich diesen (inneren) DIV dann auf:
opacity: 1.0;background: #fff;
Damit wird das Bild dann überdeckt und er Text eingeblendet.
Sauber ist diese Lösung in meinen Augen nicht. Ich arbeite aber noch dran. Der nächste Schritt wird sein, das Hintergrundbild bei hover noch ausgeblendet zu bekommen. Dann kann ich mir den überdeckenden inneren DIV sparen. Vielleicht weiß ja jemand was dazu.
Gruß,
deelite