HTML

Bild beim Überfahren eines Textlinks anzeigen

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Hallo zusammen! Ich habe eine Liste, die auch Links enthält. Nun soll beim Überfahren mit der Maus ein dazugehöriges Bild angezeigt werden. Das lässt sich sicher mit CSS umsetzen, oder? :o)

Antwort 1 von Yacc

was hälts du von javascript?

Antwort 2 von Yacc

http://aktuell.de.selfhtml.org/artikel/css/infobox/#beispiel1

schau da mal nach, ich glaub das is sowas was du haben möchtest

Antwort 3 von sutadur

Zitat:
was hälts du von javascript?

Geht auch, das wollte ich aber möglichst vermeiden.

Antwort 4 von htmlfreak

jo, das is voll cool

Antwort 5 von sutadur

Danke, der o.g. Artikel in SELFHTML hat mich weiter gebracht. :o)

Antwort 6 von sutadur

Doch noch mal eine Nachfrage: Das klappt soweit ja sehr gut, aber die Box, in der das Bild angezeigt wird, ist am oberen Rand der Webseite fixiert (mit position: absolute;) - leider auch dann, wenn im Text nach unten zu scrollen ist. Wie kann man diese Box am "sichtbaren Bildschirmrand" fixieren?

Antwort 7 von Yacc

http://de.selfhtml.org/css/layouts/fixbereiche.htm

Antwort 8 von sutadur

Das klappt leider nicht problemlos, denn dann rutscht die Box weg von ihrer "fixen" Position ganz nach links.

Antwort 9 von Yacc

aber es ist fixiert?

Antwort 10 von sutadur

Nun ja, jetzt sieht der Code noch so aus:

#box a:hover span {
position: absolute; top:130px; right: 10px;
display:block;
background: #FFFFFF;
border: solid #000000 1px;
padding: 5px;

Nach der Modifikation dann so:

#box a:hover span {
position: fixed; top:130px; right: 10px;
display:block;
background: #FFFFFF;
border: solid #000000 1px;
padding: 5px;

Dann aber scheint den Browser die Angabe des Abstandes von oben und rechts nicht mehr zu interessieren.

Antwort 11 von Yacc

versuchs mal mit margin

Antwort 12 von Yacc

  #box {
    position: absolute;
    top: 2.8em; left: 2em;
    width: 18em;
    background-color: white;
    border: 1px solid silver;
  }
  html>body #box {  /* nur fuer moderne Browser! */
    position: fixed;
  }

Antwort 13 von sutadur

Zitat:
versuchs mal mit margin

Danke, nun wird das Bild angezeigt in gleicher Höhe mit dem Text.

Antwort 14 von sutadur

... was leider, wie sich nun herausstellt, auch nicht die optimale Lösung ist, wenn der Text, zu dem das Bild angezeigt werden soll, am unteren Bildschirmrand steht. Dann nämlich wird zwar das Bild angezeigt, verschwindet aber u.U. zum großen Teil aus dem sichtbaren Bereich. Scrollbars tauchen dann zwar auf, aber die kann man nicht nutzen, da man dann mit der Maus den Link verlassen muss.

Antwort 15 von Yacc

man hat auch nur probleme mit dem zeug, was?