[JS + HTML/CSS] Div in Abhängigkeit verschiedener Linkpositionen platzieren

atwo

atwo

notorisch abwesend
ID: 195558
L
20 April 2006
2.275
138
Moin,

ich habe eine Funktion in JS, welche ein unsichtbares Div beim Überfahren eines Links sichtbar macht. Dieses Div wird an einer fixen Position geöffnet. Ich hätte das gerne so, dass das Div direkt rechts neben dem Link geöffnet wird. Es gibt verschiedene Links, die auf diese Funktion zugreifen. Jedes Div hat eine eigene Style-Definition. Diese müsste man so erweitern, dass die Linkposition mit einbezogen wird. Hat dazu jmd. eine Idee?

Gruß, atwo
 
Nicht bloß eine Idee, sondern gleich den fertig umgesetzten Quellcode:
HTML: 
<html>
 <head>
  <script>
   function Over(s) {
    document.getElementById('d['+s.id+']').style.left = s.offsetLeft + s.offsetWidth + 5;
    document.getElementById('d['+s.id+']').style.top = s.offsetTop;
    document.getElementById('d['+s.id+']').style.visibility = 'visible';
   } 
   function Out(s) {
    document.getElementById('d['+s.id+']').style.visibility = 'hidden';
   }
  </script>
 </head>
 <body>
  <a id="link1" href="#" onmouseover="Over(this);" onmouseout="Out(this);">Link1?</a><br /><br />
  <a id="link2" href="#" onmouseover="Over(this);" onmouseout="Out(this);">Link2?</a><br /><br />
  <div id="d[link1]" style="position: absolute; left: 50px; top: 50px; width: 150px; height: 50px; visibility: hidden; background-color: #eeeeff; border: 1px solid #9999ff; overflow: hidden;">Linkbeschreibung fuer den ersten Link</div>
  <div id="d[link2]" style="position: absolute; left: 50px; top: 50px; width: 180px; height: 50px; visibility: hidden; background-color: #eeeeff; border: 1px solid #9999ff; overflow: hidden;">Linkbeschreibung fuer den zweiten Link</div>
 </body>
</html>
Die Links und die zugehoerigen DIVs benoetigen eindeutige IDs - wie auch schon im Beispiel gezeigt.


Alternativer Code fuer nur ein DIV, bei dem der Inhalt angepasst wird:
HTML: 
<html>
 <head>
  <script>
   Inhalt = new Array();
   Inhalt['link1'] = 'Inhalt1';
   Inhalt['link2'] = 'Inhalt2';
   function Over(s) {
    document.getElementById('desc').style.left = s.offsetLeft + s.offsetWidth + 5;
    document.getElementById('desc').style.top = s.offsetTop;
    document.getElementById('desc').style.visibility = 'visible';
    document.getElementById('desc').innerHTML = Inhalt[s.id];
   } 
   function Out() {
    document.getElementById('desc').style.visibility = 'hidden';
   }
  </script>
 </head>
 <body>
  <a id="link1" href="#" onmouseover="Over(this);" onmouseout="Out();">Link1?</a><br /><br />
  <a id="link2" href="#" onmouseover="Over(this);" onmouseout="Out();">Link2?</a><br /><br />
  <div id="desc" style="position: absolute; left: 50px; top: 50px; width: 150px; height: 50px; visibility: hidden; background-color: #eeeeff; border: 1px solid #9999ff; overflow: hidden;">Linkbeschreibung</div>
 </body>
</html>
In diesem Beispiel werden die zugehoerigen Linkbeschreibungen in einem Array gespeichert und erst beim Oeffnen des Layers eingetragen.
 
Herzlichen Dank...:D Da mir offset.Left und offset.Top etwas ungenau waren (vor allem bei meiner Divs gab's Probleme), habe ich diese beiden Variablen durch die Mausposition ausgetauscht. Das nur als Tipp, falls jmd. Ähnliches plant und die gleichen Probleme hat.

Gruß, atwo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben