# Infobox bei Links [MouseOver]



## deaddreamer (26. Juli 2004)

Hollerö zusammen !

ich möchte gerne über meinen Links eine kleine Infobox erscheinen lassen, die sowohl Bilder, als auch Text darstellen kann. Leider habe ich nichts entsprechendes gefunden 
Für eure Hilfe ein dickes _merci_ 


Gruß


----------



## Thomas Lindner (26. Juli 2004)

Eigentlich hatten wir das schon *sehr * oft.

Guck mal bitte in der Webmaster FAQ unter Ebenen ein-/ausblenden. Danke!

MfG

Thomas


----------



## deaddreamer (26. Juli 2004)

Hallo und vielen Dank für die Antwort. Jedoch suche ich eine Art "Alt-Text" bei einem Link-Over, welcher sofort erscheint [siehe Anhang].


Gruß und Dank


----------



## Thomas Lindner (26. Juli 2004)

Genau dieses ist mit den Ebenen die man ein und ausblendet realisierbar!

Sprich damit sind nicht nur Menüs baubar, sonder auch "Tooltipps".

Beispiel:

http://www.typografix.de/temp/deaddreamer/fusch.htm

Zugegeben ein schnell "lieblos" hingeklatschtes Beispiel mit einem nicht gerade optimierten Code, aber als Muster sollte es reichen...


----------



## deaddreamer (26. Juli 2004)

Vielen Dank  Kann man diesen Tooltipp denn auch über einem Link darstellen ?


----------



## Thomas Lindner (26. Juli 2004)

Jepp, ich habe jetzt in dem Beispiel nur keine genaue Positionierung vorgenommen, weil es nur ums Prinzip selber ging.


----------



## xxenon (26. Juli 2004)

Hab mal ein bisschen rumprobiert und muss sagen, es ist gar nicht leicht, eine Version zu basteln, die sowohl in Mozilla als auch in Microsoft Browsern funktioniert...

Aber das Ergebnis funktioniert (zumindestens) in den aktuellen Versionen von Internet Explorer, Mozilla und Opera.

Wenn du noch Spezialeffekte haben willst (Fade-In, Zeitverzögerung, Mouse-Follow, etc.) musst du dir aber eine andere fertige Lösung suchen oder selber programmieren =).

In diesem Sinne HTH

xxenon



```
<html>
<head>
<script type="text/javascript">
<!--
  var PageX, PageY;
  var OffsetX = 10;
  var OffsetY = 10;

  function setCoords(Event)
    {
    PageX = Event.pageX;
    PageY = Event.pageY;
    }

  function tooltip(id)
    {
    with(document.getElementById(id).style)
      {
      if(visibility == "visible")
        visibility = "hidden";
      else
        {
        if(document.defaultCharset)
          {
          left = event.clientX + OffsetX;
          top = event.clientY + OffsetY;
          }
        else
          {
          document.onmousemove = setCoords;
          left = PageX + OffsetX;
          top = PageY + OffsetY;
          }
        visibility = "visible";
        }
      }
    }
//-->
</script>
<style type="text/css">
<!--
  .tooltip { position: absolute;
                 border: 1px solid;
                 background-color: #ccf; }
-->
</style>
</head>
<body>
<div id="tt1" class="tooltip" style="visibility: hidden;">Ich bin ein Tooltip!</div>
<div id="tt2" class="tooltip" style="visibility: hidden;">Ich auch!</div>
<div id="tt3" class="tooltip" style="visibility: hidden;">Na, und ich erst!</div>
<div id="tt4" class="tooltip" style="visibility: hidden;">...</div>
<a href="#" onmouseover="tooltip('tt1');" onmouseout="tooltip('tt1');">Klick!</a><br />
<a href="#" onmouseover="tooltip('tt2');" onmouseout="tooltip('tt2');">Klick!</a><br />
<a href="#" onmouseover="tooltip('tt3');" onmouseout="tooltip('tt3');">Klick!</a><br />
<a href="#" onmouseover="tooltip('tt4');" onmouseout="tooltip('tt4');">Klick!</a>
</body>
</html>
```


----------



## bernatory (30. Juli 2004)

*Noch eine Frage*

Hallo, hab mir das Script mal angetan 

Eines funktioniert aber nicht - da wäre ich sehr dankbar, wenn das noch jemand wüsste...

Wenn ich die Tooltipp-Box irgendwo in der Mitte der Seite setze und ich die Seite etwas scrolle, erscheint die Box nicht mehr an der angedachten Position, sondern höher. Was kann man dagegen machen?

Über jede Antwort wäre ich sehr dankbar.

Berni


----------



## xxenon (30. Juli 2004)

Sind deine TT-Layer denn mit "position:absolute" gekennzeichnet?

MfG.


----------



## bernatory (30. Juli 2004)

*Jepp*

Ja, ich hab sie mal als "absolute" mal als "relative" aber auch mal als "fixed" ausprobiert. Hat nichts gebracht. 

Berni


----------



## Arachne (30. Juli 2004)

Die Angabe für das "festnageln" auf den Bildschirm ist "position: fixed", wird aber vom IE leider nicht interpretiert.

Hier hat kaidoh aber einen work-around für IE beschrieben.

Gruß
Arachne


----------



## bernatory (30. Juli 2004)

*ja...*

Danke, probiere ich gleich mal aus...


----------

