✔ Tooltip auf Knopfdruck?!

Also, bei beiden Browsern werden die Tooltips zwar korrekt angezeigt, aber beim Inet Explorer wirds nicht "perfekt" an der richtigen Stelle angezeigt.

D.h. beim Firefox werden die Tips z.b. neben den bunten Punkten haargenau angezeigt und beim Internet Explorer etwas verschoben.

Danke für deine Antwort schonmal bzw eure Antworten.
 
Hi,

ich kann da, wie auch Quaese, keinen grundlegenden Unterschied in den genannten Browsern feststellen.

Wie es scheint, ist die horizontale Position des Tooltips aber von der Fensterbreite abhängig, und variiert in allen Browsern, wenn der Viewport horizontal skaliert wird.
 
Maik hat gesagt.:
Hi,

ich kann da, wie auch Quaese, keinen grundlegenden Unterschied in den genannten Browsern feststellen.

Wie es scheint, ist die horizontale Position des Tooltips aber von der Fensterbreite abhängig, und variiert in allen Browsern, wenn der Viewport horizontal skaliert wird.
Zum Vergrößern anklicken....


Kann man es denn fixieren, so das es nicht mehr von der Fensterbreite abhängig ist?

mfg
 
louS hat gesagt.:
Kann man es denn fixieren, so das es nicht mehr von der Fensterbreite abhängig ist?
Zum Vergrößern anklicken....
Indem du den Inhalt des DIVs nicht mittels align="center" horizontal zentrierst, denn die Positionsangaben der Tooltips beziehen sich auf den linken und oberen Rand des Dokumentkörpers bzw. Viewports.
 
Hi,

du könntest im onload- und im onresize-Event ein Korrekturglied berechnen, das du auf die horizontalen Positionsangaben addierst.

Das Korrekturglied entspricht dem Abstand des Bildes zum linken Fensterrand. Dazu wird die Breite des Bodies und des Bildes benötigt. Um zweites bestimmen zu können, wird die Grafik mit einer ID (map_id) versehen.

Das Korrekturglied kannst du im Header wie folgt bestimmen:
Code: 
<script type="text/javascript">
  <!--
var intKorr = 0;

window.onload = function(){
  calcCorrection();
}

window.onresize = function(){
  calcCorrection();
}

function calcCorrection(){
  // Breite des Bodies
  intOffX = document.getElementsByTagName("body")[0].offsetWidth;
  // Breite der Grafik
  intImgWidth = document.getElementById("map_id").width;
  // Korrekturglied (= linksseitig Abstand der Grafik zum Fensterrand)
  intKorr = (intOffX-intImgWidth > 0)? Math.floor((intOffX-intImgWidth)/2) : 0;
}
 //-->
</script>
Das Bild mit ID:
Code: 
<img id="map_id" src="http://lous.dartdiddl.de/ItalyMafiaServerMap/index.jpg?3" width="990" height="1089" border="0" usemap="#Map" />
Und zu guter Letzt ein angepasster Aufruf eines Tooltipps (Änderungen sind rot markiert):
Code: 
<area shape="rect" coords="255,26,377,56" href="javascript:void(0);" onmouseover="Tip('<a href=&quot;#&quot; onclick=&quot;Tip(\'<strong><u>Taxi Job</u></strong><br> You want to become a taxi driver? Just type at the Infosymbol <em>/taxidriver</em> to become a taxi driver.<br>To set up your fare, just use the command <em>/fare [price]</em><br>&nbsp;<br><img src=taxijob.jpg width=200 height=100>\', WIDTH, 200, PADDING, 6, BGCOLOR, \'#ffffff\', FIX, [134+intKorr,629], DELAY, 100, STICKY, true, CLICKCLOSE, true); window.setTimeout(function(){window.scrollTo(134,629);}, 100); return false;&quot;><img src=images/carjackerdot.png width=10 height=10 border=0> <strong>Boat Licence</strong></a> /* HIER WEITER AUFRUFE */', STICKY, true, FIX, [261+intKorr,64], CLOSEBTN, false, CLICKCLOSE, true, FOLLOWMOUSE, false, WIDTH, 145, PADDING, 6, BGCOLOR, '#ffffff')">
Wie in einem Beispiel angedeutet, müssten alle x-Komponenten um das Korrekturglied ergänzt werden.

Damit bestehen zwar noch minimale Unterschiede zwischen IE und Firefox, aber die könntest du mit Hilfe weiterer Korrekturglieder anpassen.

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Vielen Dank für die Antwort!

Ich hätte da noch ein Frage und zwar, wie kann man auf einem Hotspot ein Rollover bild machen?
Nehmen wir mal an, ich mach einen Hotspot auf Button A, nun möchte ich das wenn man mit der Maus über Button A geht das dort dann Button A_Glow erscheint :)

Danke schonmal.
 
Hi, ich melde mich auch mal wieder nach langer Zeit :D
Und zwar geht es um folgendes Problem:
http://lous.dartdiddl.de/test/Untitled-2.html
Wenn man dort über den oberen roten Punkt auf der Karte geht erscheint ein Tooltip, alles richtig soweit, wenn man auf den Link im Tooltip klickt, öffnet sich rechts in einem iframe ein Text.
Alles richtig soweit, wenn man nun über &quot;Verhalten&quot; geht mit der Maus öffnet sich ein Tooltip.
Ich will nun aber, dass sicher der Tip AUF der Karte öffnet und nicht rechts in dem iframe.

Vielen Dank schonmal für eure Antworten.
 
Hi,

ruf aus dem zweiten iFrame einfach die Tooltip-Funktion aus dem ersten Frame auf:
Code: 
onmouseover="top.iframe.Tip('Tooltip mit Ein- und Ausblend-Animation (FADEIN- und FADEOUT-Kommandos), oberhalb des Mauszeigers positioniert (ABOVE-Kommando).', WIDTH, 250, CLICKCLOSE, true, FIX, [0,0])"
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück