✔ Probleme mit ToolTip-Funktion !

G

gustavmega

Grünschnabel
Hallo,

ich möchte mit ToolTip-Funktion es erreichen, dass wenn man mit der Maus auf bestimmte Bereich des Biuldes raufgeht, dann im unteren Bildbereich Informationen gezeigt wird.
Habe aber das Problem, dass wenn man das erste Mal die Seite aufruft, alle Informationen im unteren Bereich des Bildes aufgelistet werden und nach dem man mit der Maus auf alle Bereich gegangen ist, funktioniert die Seite so wie es sein soll.

Das Quellcode sieht wie folgt aus:

HTML: 
<html><head>

<script><!--
  tooltip = null;
  document.onmousemove = updateTooltip;

  function updateTooltip(e) {
    try {
      x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
      y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
      if (tooltip != null) {
        tooltip.style.left = (x + 20) + "px";
        tooltip.style.top = (y + 20) + "px";
      }
    } catch (error) { error=null; }
  }

  function showTooltip(id) {
    try {
      tooltip = document.getElementById(id);
      tooltip.style.display = "block"
    } catch (error) { error=null; } 
  }

  function hideTooltip() {
    try {
      tooltip.style.display = "none";
    } catch (error) { error=null; } 
  }
//--></script>


</head>
<body bgcolor="#222222" text="#EEEEEE">
<table bgcolor="#222222" width="100%" height="100%">
<tr>
<td valign="middle" align="center">
<table width="30%" bgcolor="#000000"><tr><td style="color:#000000" height="25" bgcolor="#777777" align="center">
WILKOMMEN
</td></tr><tr><td align="center">




  <map name="Landkarte"> 
    
  <area shape="rect" coords="86,242,242,290" href="#" onmouseover="showTooltip('d1')" onmouseout="hideTooltip()">    
  <area shape="rect" coords="518,202,610,275" href="#" onmouseover="showTooltip('d2')" onmouseout="hideTooltip()">
  <area shape="rect" coords="18,350,137,384" href="#" onmouseover="showTooltip('d3')" onmouseout="hideTooltip()">
  <area shape="rect" coords="638,16,765,72" href="#" onmouseover="showTooltip('d4')" onmouseout="hideTooltip()">
  <area shape="rect" coords="369,62,565,108" href="#" onmouseover="showTooltip('d5')" onmouseout="hideTooltip()">
  <area shape="rect" coords="75,15,201,69" href="#" onmouseover="showTooltip('d6')" onmouseout="hideTooltip()">
  
  </map>

    <img border="0" src="14.jpg" width="800" height="400" usemap="#Landkarte"></td>
</tr><tr><td height="25" bgcolor="#777777" align="center">

<div class="tooltip" id="d1">
Bereich 1
</div>

<div class="tooltip" id="d2">
Bereich 2
</div>

<div class="tooltip" id="d3">
Bereich 3
</div>

<div class="tooltip" id="d4">
Bereich 4
</div>

<div class="tooltip" id="d5">
Bereich 5
</div>

<div class="tooltip" id="d6">
Bereich 6
</div>

</td></tr>
</td>
</tr>
</table>
</body>
</html>

Man kann es auch in diesem Beispiel mein Problem sehen.

Wäre nett, wenn jemand mir weiterhelfen könnte.


MFG
G.M.
 
Hi,

du musst zunächst die Anzeige der Infos unterbinden:

Code: 
<style type="text/css">
<!--
.tooltip {
display:none;
}
-->
</style>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück