Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon sutadur vom 03.01.2019, 16:22 Options

Bild beim Überfahren eines Textlinks anzeigen

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 schreiben

Antwort 1 von Yacc vom 03.01.2019, 16:23 Options

was hälts du von javascript?

Antwort 2 von Yacc vom 03.01.2019, 16:30 Options

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 vom 03.01.2019, 16:31 Options

Zitat:
was hälts du von javascript?

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

Antwort 4 von htmlfreak vom 03.01.2019, 16:36 Options

jo, das is voll cool

Antwort 5 von sutadur vom 03.01.2019, 16:55 Options

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

Antwort 6 von sutadur vom 03.01.2019, 17:36 Options

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 vom 03.01.2019, 17:38 Options

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

Antwort 8 von sutadur vom 03.01.2019, 17:54 Options

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

Antwort 9 von Yacc vom 03.01.2019, 17:56 Options

aber es ist fixiert?

Antwort 10 von sutadur vom 03.01.2019, 18:00 Options

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 vom 03.01.2019, 18:01 Options

versuchs mal mit margin

Antwort 12 von Yacc vom 03.01.2019, 18:18 Options

  #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 vom 04.01.2019, 09:13 Options

Zitat:
versuchs mal mit margin

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

Antwort 14 von sutadur vom 04.01.2019, 09:26 Options

... 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 vom 04.01.2019, 14:00 Options

man hat auch nur probleme mit dem zeug, was?

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken