bei mouseover erscheint statt bild ein text?

[gabi]

hab jetz schon ein paar css Methoden angeschaut, aber nicht so das richtige gefunden - normalerweise bedeutet mouseover ja auch Javascript, oder?

ich möchte gerne dass ich wenn ich mit der Maus über ein Bild fahre, nicht das Bild wechselt sondern sich dadrüber ein Text legt. Mehrere Bilder auf der Seite und somit mehrere Texte, immer indivduell festgelegt (vielleicht im span?)
ich möchte aber nicht dass der Text UNTER oder NEBEN dem Bild erscheint, sondern genau drüber... am besten mit weißem oder halbtransparent-weißem Hintergrund (siehe Beispiel-Link)

im sinne von onmouseover get spantext ^^

bin für alle Lösungsmöglichkeiten offen

[Gunnar Bittersmann]

@@gabi:

nuqneH

normalerweise bedeutet mouseover ja auch Javascript, oder?

Ja. Aber der Effekt, um den es dir geht, bedeutet nicht notwendigerweise mouseover.

In CSS heißt das :hover. [CSS20 §5.11.3]

Bedenke auch, dass nicht alle Nutzer mit der Maus navigieren!

ich möchte gerne dass ich wenn ich mit der Maus über ein Bild fahre, nicht das Bild wechselt sondern sich dadrüber ein Text legt. Mehrere Bilder auf der Seite und somit mehrere Texte, immer indivduell festgelegt (vielleicht im span?)

Oder 'figcaption', wenn es denn die Bildunterschrift ist:

  
<figure>  
  <img src="…"/>  
  <figcaption>Lorem ipsum</figcaption>  
</figure>

ich möchte aber nicht dass der Text UNTER oder NEBEN dem Bild erscheint, sondern genau drüber... am besten mit weißem oder halbtransparent-weißem Hintergrund (siehe Beispiel-Link)

Dann formatierst du entsprechend:

figcaption  
{  
  background: rgba(255, 255, 255, 0.5);  
  bottom: 0;  
  display: none;  
  left: 0;  
  position: absolute;  
  right: 0;  
}

Damit sich die absolute Positionierung auf das Bild bezieht:

figure  
{  
  position: relative;  
}

Anzeigen:

figure:hover figcaption  
{  
  display: block;  
}

Qapla'

[Markus**]

Moin @all

Oder 'figcaption', wenn es denn die Bildunterschrift ist:

<figure>
  <img src="…"/>
  <figcaption>Lorem ipsum</figcaption>
</figure>

  
Es wäre vielleicht gut dazu zu sagen, dass das <figure> Tag sowie <figurecaption> erst ab HTML 5 gültig sind. In älteren HTML Versionen ist die Notation wie oben, nicht valide und kann durchaus zu unerwünschten Effekten führen!  
  
Gruß, Markus\*\*

[Steel]

Moinsen!

Waum hast Du dann nicht gleich die oldschool Loesung dazugeschrieben? Die wuerde aus einem Div mit einem Bild und einem weiteren Container fuer den Text stehen. (ein p z.B.)

Denkbar waere auch ein Container  mit einem Textelement und dem Bild als Hintergrund. Je nachdem wofuer das dienen soll. Bei einer Navigation z.B. wuerd ich die Bilder nicht als img sondern als Hintergrund einbauen.

[MudGuard]

Hi,

Waum hast Du dann nicht gleich die oldschool Loesung dazugeschrieben? Die wuerde aus einem Div mit einem Bild und einem weiteren Container fuer den Text stehen. (ein p z.B.)

Nein, ein div wäre ungünstig. Denn nicht überall, wo ein img (inline aus HTML-Sicht) auftreten darf, darf auch ein div (block aus HTML-Sicht) auftreten. Besser wäre also ein span (inline aus HTML-Sicht).

cu,
Andreas

[Gabi]

Hallo, könntet ihr mir ein Beispiel geben wie ich das mit div oder span lösen könnte? Ist mir jetzt nicht so ganz klar, wie euer Vorschlag zu verstehen ist.

[dave]

Hi,

Hallo, könntet ihr mir ein Beispiel geben wie ich das mit div oder span lösen könnte? Ist mir jetzt nicht so ganz klar, wie euer Vorschlag zu verstehen ist.

Genauso wie in Gunnars Beispiel, nur nicht mit figure- und figcaption- sondern span-Elementen.

~dave

[Steel]

Hi!

Hallo, könntet ihr mir ein Beispiel geben wie ich das mit div oder span lösen könnte? Ist mir jetzt nicht so ganz klar, wie euer Vorschlag zu verstehen ist.

Genau wie Gunnar das geschrieben hat, nur die HTML 5 Elemente figure und figcaption mit anderen passenden Elementen ersetzen.

[Steel]

Nein, ein div wäre ungünstig. Denn nicht überall, wo ein img (inline aus HTML-Sicht) auftreten darf, darf auch ein div (block aus HTML-Sicht) auftreten. Besser wäre also ein span (inline aus HTML-Sicht).

Kommt drauf an. Ich wuerde fuer den Text wahrscheinlich ein p nutzen und allein deshalb muesste ein div drumrum. Inlinedarstellung ist ja kein Problem. Nur mit spans sollte natuerlich auch machbar sein.