Frage zum "Aufscheinen" von Text oder Bildern

[mona_maek]

Hey,

ich muss vorrausschicken, dass ich kein Profi bin. Mein Anliegen: ich hab einmal vor langer Zeit auf einer deutschen Homepage zu HTML einen "Trick" gesehen, den ich auch gern anwenden möchte. Und zwar, wenn man über ein kleines Bild oder eine spezielle Textstelle mit der Maus drüberfährt, erscheint das Bild größer oder ein Fenster mit einem Text zusätzlich an einer anderen Stelle auf derselben Seite.

Weiß vielleicht jemand wie man das nennt, dass ich danach googlen kann bzw. kennt jemand eine gute und vor allem schrittweise Anleitung wie man das nachmachen kann?

Tausend Dank, mona_maek

 

[threadi]

hover oder onmouseover - hat aber nichts mit HTML sondern eher mit CSS und/oder JavaScript zu tun.

 

[Bernhard]

Hey,

ich muss vorrausschicken, dass ich kein Profi bin. Mein Anliegen: ich hab einmal vor langer Zeit auf einer deutschen Homepage zu HTML einen "Trick" gesehen, den ich auch gern anwenden möchte. Und zwar, wenn man über ein kleines Bild oder eine spezielle Textstelle mit der Maus drüberfährt, erscheint das Bild größer oder ein Fenster mit einem Text zusätzlich an einer anderen Stelle auf derselben Seite.

Weiß vielleicht jemand wie man das nennt, dass ich danach googlen kann bzw. kennt jemand eine gute und vor allem schrittweise Anleitung wie man das nachmachen kann?

Tausend Dank, mona_maek

Hallo Mona,

das nennt sich Tooltip, eine kurze Anleitung findest Du z.B. hier.

Grüße
Bernhard

 

[mona_maek]

Danke für eure Hilfe ... ich werd mir die Seite zu Gemüte führen - bei Problemen hoffe ich dann auf eure Hilfe.

DANKE.

... so, hab das mit dem Tooltip soweit realisiert - ich hab nur das Problem, dass die Tooltips nicht immer an der selben Stelle auf der Seite sitzen sondern immer in einem gewissen Abstand zu dem markierten Wort. Kann das am CSS-Code liegen?

a.tip_anzeigen {
         color: #0000ff;
         position: relative;
         text-decoration: none;
         font-style: italic;
         }
a.tip_anzeigen:hover {
         background-color: transparent;
         color: #0000ff;
         }
a.tip_anzeigen span {
         display: none;
         text-decoration: none;
         }
a.tip_anzeigen:hover span {
         border: 1px solid #000000;
         background-color: #c7cc8a;
         display: block;
         position: absolute;
         color: #000000;
         font-family: Verdana,sans-serif;
         font-size: 12px;
         text-align: left;
         z-index: 20;
         left: 180px;
         top: -70px;
         }
     .laenge {
         width: 155px;
         }

Kann jemand den maßgeblichen Fehler erkennen? Wäre echt dankbar.
lg

 

[Bernhard]

... so, hab das mit dem Tooltip soweit realisiert - ich hab nur das Problem, dass die Tooltips nicht immer an der selben Stelle auf der Seite sitzen sondern immer in einem gewissen Abstand zu dem markierten Wort. Kann das am CSS-Code liegen?

a.tip_anzeigen {
         color: #0000ff;
         position: relative;
         text-decoration: none;
         font-style: italic;
         }
a.tip_anzeigen:hover {
         background-color: transparent;
         color: #0000ff;
         }
a.tip_anzeigen span {
         display: none;
         text-decoration: none;
         }
a.tip_anzeigen:hover span {
         border: 1px solid #000000;
         background-color: #c7cc8a;
         display: block;
         position: absolute;
         color: #000000;
         font-family: Verdana,sans-serif;
         font-size: 12px;
         text-align: left;
         z-index: 20;
         left: 180px;
         top: -70px;
         }
     .laenge {
         width: 155px;
         }

Kann jemand den maßgeblichen Fehler erkennen? Wäre echt dankbar.

lg

Hallo Mona,

ein absolut positioniertes Element richtet seine Position immer am in der Hierarchie
nächsten relativ positionierten Element aus (in diesem Fall also an a.tip_anzeigen).

Wenn Du dort das position:relative entfernst, und es statt dessen z.B. dem body
gibst, dann richtet es sich an diesem aus.

Grüße
Bernhard

 

[mona_maek]

Hey,

wenn ich den Tooltip jetzt beispielsweise wirklich auf den body beziehen würde wollen, schreib ich da einfach nur position: relative in die {}-Klammern (und lösch die Angabe natürlich von a.tip_anzeigen gleichzeitig weg). Ich hab das nämlich so versucht ... hat aber nicht geklappt - muss ich da noch einen Bezug zum Tooltip im Body angeben? Oder wie würde das aussehen?

Danke schon jetzt recht herzlich für die Antwort.

 

[Bernhard]

Hey,

wenn ich den Tooltip jetzt beispielsweise wirklich auf den body beziehen würde wollen, schreib ich da einfach nur position: relative in die {}-Klammern (und lösch die Angabe natürlich von a.tip_anzeigen gleichzeitig weg). Ich hab das nämlich so versucht ... hat aber nicht geklappt - muss ich da noch einen Bezug zum Tooltip im Body angeben? Oder wie würde das aussehen?

Danke schon jetzt recht herzlich für die Antwort.

Hallo Mona,

ich vermute, dass Du sonst nichts verändert hast?
Dann setze mal top für a.tip_anzeigen:hover span auf 0. Das hat momentan
einen negativen Wert, daher wird der Tooltip aus dem Viewport geschoben.

Der Bezug besteht dadurch, dass der body den Tooltip umschließt.
Dazwischen darf natürlich kein weitere relativ positioniertes Element kommen,
das ihn ebenfalls umschließt.

Grüße
Bernhard

 

[mona_maek]

Yuuuuhhhuuu, DANKE ... du bist ein Schatz. Wirklich, tausend Mal DANKE