Autor Thema
glanzmeister

Registriert: 31.07.2007
Beiträge: 11

CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Erstellt am 31.08.2007 um 13:03:46   
Hi,

ich beschäftige mich gerade mit CSS.

Ich möchte in meiner Artikelbeschreibung bestimmte Standard-Inhalte ausgeblendet zur Verfügung stellen, damit die Beschreibung übersichtlicher wird. Bei überfahren eines Bildes, soll der Inhalt dann an einer anderen Stelle eingeblendet werden.

also folgender code steht:

Vorschaubereich definiert
#vorschau { position:relative; background-repeat:no-repeat; width:810px; height:560px;}
#vorschau a.galerie2 { display:block; text-decoration:none; color:#ffffff; background-position:center; background-repeat:no-repeat; height:50px; width:100px; }
#vorschau a.galerie2 span { width:0px; height:0px; }
#vorschau a.galerie2:hover span { width:400px; height:400px; }
#vorschau a.text1 { background-image:url(http://www.google.de/intl/en_com/images/logo_plain.png);}
#vorschau a.text1 span>div { display:block; }

Textbereich vordefiniert
#text1 { display:none }

im Body

<br /> <div id="vorschau"><TABLE width="100%" height="100%"><TR><TD width="50%" height="100%" valign="top"><span style="position:relative;"><div id="text1">Hier soll der Text stehen! Standardmäßig wird er ausgeblendet. Bei Hover aufs Bild soll dieser Text eingeblendet werden. Wie muss der Code dafür aussehen?</div></span></TD>...

und an anderer Stelle dann der Link:
<a class="galerie2 text1" href="#" title="Bild"><span></span></a>

Es funktioniert nicht... wo ist mein Denkfehler? Für Anregungen wäre ich dankbar.

Grüße
pk

Registriert: 08.09.2003
Beiträge: 4869

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 31.08.2007 um 13:27:18   
Mir ist nicht ganz klar, worauf Du hinaus willst.
Welches Bild? Hover auf ein Hintergrundbild funktioniert nicht.

Soll das ein Tooltip-Effekt werden?
Schau mal da: http://www.elektro-kahlhorn.de/index.php/cat/c17_Gartenpumpen.html
und zeige mit der Maus auf die Bilder in der Tabelle.
Soll das sowas werden?

Bei dem gibt's hübsche Beispiele: http://www.cssplay.co.uk/menu/magnify
Massenweise CSS-Beispiele (auch für Popups) sind hier: http://brunildo.org/test/

Probleme wirst Du beim IE6 mit hover bekommen. Das funktioniert nur mit Klimmzügen.


Moonstar

Registriert: 24.05.2007
Beiträge: 75

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 31.08.2007 um 13:56:08   
Ich habs auch nach mehrmaligen lesen nicht gerafft.

@kahlhorn. Danke für die links

Ralf

Registriert: 26.06.2005
Beiträge: 5680
Stadt: Buchholz/Nordheide
Land: Deutschland
www.xtsell.de  
Branche: Web-Development

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 31.08.2007 um 14:09:47   
Verstanden hab ich es zwar, aber der Ansatz ist falsch. Was man per :hover anzeigen lassen möchte, kann nicht an x-beliebiger Stelle definiert werden, sondern nur als Kindelement des Elementes, welches mit :hover den Effekt veranlassen soll.

Beim IE (nicht nur 6) sind erhebliche Einschränkungen zu beachten und für solche Fälle kann man auch mal von der Regel abweichen, zunächst in einem Standardbrowser zu entwickeln und dann die Abweichungen für den IE zu bedienen. Hover-Effekte prüfe ich zunächst im IE6.
Wichtig ist die Angabe position:relative; beim Elternelement und eine Veränderung beim :hover (ich verwende gern background:transparent;) für den IE6.

Auch von mir vielen Dank für die Links.

glanzmeister

Registriert: 31.07.2007
Beiträge: 11

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 31.08.2007 um 15:31:29   
Na ja, ich habe im Internet diese CSS-Galerien und gesehen und möchte diese jetzt umarbeiten, sodass nicht nur diese Bilder vergrößert werden, sondern auch Texte eingeblendet werden können.

Der Trick ist hier der span-Tag.
Hier mal ein Link wo es besser beschrieben ist, als ich es je beschreiben könnte :)

http://www.brandnewbox.co.uk/logbook/article/using_css_to_produce_an_image_gallery/?seemore=y

Normal ist in dem oben erwähnten span-Tag nichts hinterlegt.

Nun war mein Gedanke dort Text zu hinterlegen und mit display:none nicht anzeigen: anstatt den Hintergrund zu ändern, wie das in dem Beispiel mit den Bilder gemacht wird, wollte ich das einfach mit dem display machen und...

Hier auch noch ein anderes Anwendungsbeispiel:
http://www.modehaus-mayer.at/women/gallery/brax/bilder.html

versteht ihr, wie ich das meine?

geändert am 31.08.2007 16:39:31 von glanzmeister

Ralf

Registriert: 26.06.2005
Beiträge: 5680
Stadt: Buchholz/Nordheide
Land: Deutschland
www.xtsell.de  
Branche: Web-Development

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 31.08.2007 um 22:11:34   
Zitat:
Nun war mein Gedanke dort Text zu hinterlegen und mit display:none nicht anzeigen: anstatt den Hintergrund zu ändern, wie das in dem Beispiel mit den Bilder gemacht wird, wollte ich das einfach mit dem display machen und...

Dann mach das doch. Wie in dem Beispiel die Farbe des Textes auf ROT geändert wird, kannst du natürlich auch jede andere Eigenschaft ändern (display, position etc.).

Das zweite Beispiel ist unpassend, da es nur Hintergrundbilder setzt.

Die grundsätzliche Struktur ist:

<a href="#"><img src="Dein Bild"><span>Dein Text</span></a>

Für das A-Element definierst du dann position:relative; und bei :hover background:transparent;
Für das SPAN-Element definierst du display:none; und bei :hover display:block;

Ein Beispiel für derart angezeigten Text findest du bei mir im Shop gleich auf der Startseite (die Links im Block "Afterbuy Shop").

glanzmeister

Registriert: 31.07.2007
Beiträge: 11

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 04.09.2007 um 10:53:40   
Vielen Dank für Eure Mühen und Tipps.

Ich habe eine zufriedenstellende Lösung schreiben können.

pk

Registriert: 08.09.2003
Beiträge: 4869

AW: CSS - Ich möchte bei Hover über ein Bild an anderer Stelle Text einblenden...      Antwort vom 04.09.2007 um 11:04:35   
Lass uns an Deinem Schicksal teilhaben.