Amazon - Context Links: Ermittlung der Position?

C

Chosi

Mitglied
Hallo zusammen,

mich würde mal interessieren, wie die Position der kleinen Boxen, welche unter den hervorgehobenen Schlagworten auftachen bestimmt wird. Veruche gerade etwas ähnliches zu implementieren und mag eigentlich nicht mit der Cursorposition arbeiten, was hier anscheinend auch nicht der Fall ist.

Wie positioniert man also am besten eine kleine Box - nach onClick - unter einem Link, so dass diese sich über den restlichen Content legt?
 
Hi,

die Positionen der Boxen werden über das Eventobjekt bestimmt - siehe hierzu http://cls.assoc-amazon.de/de/popover/popup.js (Methode: showpreview).

Eine vereinfachte Umsetzung könnte wie folgt aussehen:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
function tooltip(objEvent, intShow){
  if((objEvent == null) || (typeof(objEvent) == 'undefined')){
    objEvent = window.event;
  }

  with(document.getElementById("tool_id").style){
    top  = objEvent.clientY + "px";  // y-Position ermitteln und festlegen
    left = objEvent.clientX + "px";  // x-Position ermitteln und festlegen
    display = (intShow==1)? "block" : "none";
  }
}
// -->
</script>
</head>
<body>
<div id="tool_id" style="position: absolute; z-index: 99; top: 0; left: 0; width: 200px; height: 80px; border: 1px solid #aaa; display: none;">Ich bin der Tooltipp</div>
<a href="www.seite.de" onmouseover="tooltip(event, 1);" onmouseout="tooltip(event, 0)">der Tooltipp</a>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Ja, das ist klar, wie es über die Cursorposition funktioniert.
Was ich mich frage ist, wie man es realisiert, wenn die Box immer direkt unter dem Link hängen soll, ganz egal, ob man jetzt z.B. den ersten der letzten Buchstaben mit der Maus berührt.
Wie eben bei diesen Amazonboxen hier im Forum. Das heißt, man muss irgendwie die Position des Links bestimmen können.

Hmm...
 
Zuletzt bearbeitet:
Hi,

vielleicht hilft es weiter, das Event-auslösende Element (target bzw. srcElement) zu ermitteln, dessen Seitenposition
sowie seine Höhe auszulesen und der Tooltip-Box zuzuweisen.

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
*{ margin: 0; padding: 0;}
 //-->
</style>
<script type="text/javascript">
<!--
function tooltip(objEvent, intShow){
  if((objEvent == null) || (typeof(objEvent) == 'undefined')){
    objEvent = window.event;
  }

  // Auslösendes Element ermitteln
  var objSrc = (objEvent.target)? objEvent.target : objEvent.srcElement;

  with(document.getElementById("tool_id").style){
    top  = (objSrc.offsetTop + objSrc.offsetHeight) + "px";  // y-Position festlegen
    left = (objSrc.offsetLeft) + "px";                       // x-Position festlegen
    display = (intShow==1)? "block" : "none";
  }
}
// -->
</script>
</head>
<body>
<div id="tool_id" style="position: absolute; z-index: 99; top: 0; left: 0; width: 200px; height: 80px; border: 1px solid #aaa; background: #efefe0; display: none;">Ich bin der Tooltipp</div>

<div style="margin: 30px; border: 1px solid #aaa; background: #ddd; padding: 24px;">
  <a href="www.seite.de" style="font-size: 1.0em;" onmouseover="tooltip(event, 1);" onmouseout="tooltip(event, 0)">der Tooltipp</a>
  <p style="height: 200px;">Mittendrin ein Absatz</p>
  <p style="text-align: right;">
    <a href="www.seite.de" style="font-size: 1.0em;" onmouseover="tooltip(event, 1);" onmouseout="tooltip(event, 0)">der Tooltipp</a>
  </p>
</div>
</body>
</html>
Ciao
Quaese
 
Prima, vielen Dank :)

Hab' das Ganze noch etwas erweitert, so dass es auch innerhalb absolut positionierter Bereiche klappt. Leider muss man im IE, sowie FF noch einige wenige Pixel nachbessern, unter Opera klappts perfekt. merkwürdig ...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
*{ margin: 0; padding: 0;}
 //-->
</style>
<script type="text/javascript">
<!--
function tooltip(objEvent, intShow)
{
  if(!objEvent)
  {
    objEvent = window.event;
  }

  // Auslösendes Element ermitteln:
  var objSrc = (objEvent.target)? objEvent.target : objEvent.srcElement;

  with(document.getElementById("tool_id").style)
  {
    top  = getPos(objSrc, true) + "px";     // y-Position festlegen
    left = getPos(objSrc, false) + "px";    // x-Position festlegen
    display = (intShow==1)? "block" : "none";
  }
}

function getPos(objSrc, argTop)
{
  var value = (argTop) ? (objSrc.offsetTop + objSrc.offsetHeight) : (objSrc.offsetLeft);
  objSrc = objSrc.offsetParent;

  while(objSrc)
  {
    value += (argTop) ? (objSrc.offsetTop) : (objSrc.offsetLeft);
    objSrc = objSrc.offsetParent;
  }

  return(value);
}
// -->
</script>
</head>
<body>
<div id="tool_id" style="position: absolute; z-index: 99; top: 0; left: 0; width: 200px; height: 80px; border: 1px solid #aaa; background: #efefe0; display: none;">Ich bin der Tooltipp</div>

<div style="display: block; width: 400px; position: absolute; top: 20px; left: 20px; border: 5px solid limegreen; padding: 20px;">

  <div style="margin: 30px; border: 1px solid #aaa; background: #ddd; padding: 24px;">
    <a href="www.seite.de" style="font-size: 1.0em;" onmouseover="tooltip(event, 1);" onmouseout="tooltip(event, 0)">der Tooltipp</a>
    <p style="height: 200px;">Mittendrin ein Absatz</p>
    <p style="text-align: right;">
      <a href="www.seite.de" style="font-size: 1.0em;" onmouseover="tooltip(event, 1);" onmouseout="tooltip(event, 0)">der Tooltipp</a>
    </p>
  </div>

</div>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück