ToolTip bei MouseOver

[Elayna]

Hallo!

Ich stecke total fest! (Newbie)
Folgendes Problem:
Bei mehreren verschiedenen Button soll jeweils ein anderer erklärender Text erscheinen, wenn der Benutzer mit der Mouse darüberfährt. Gleichzeitig sollen die Button auch als Links fungieren. Bis jetzt habe ich ein Script und die Button in der gewünschten Anordnung.

<script type="text/javascript">

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
v6 = (document.getElementById)? true:false

// Layer anzeigen
function showlayer(layerid)
  {
  if (ns4) document.layers[layerid].visibility = "show"
  else if (v6) document.getElementById(layerid).style.visibility = "visible";
  else if (ie4) document.all[layerid].style.visibility = "visible"
  }

// Layer verstecken
function hidelayer(layerid)
  {
  if (ns4) document.layers[layerid].visibility = "hide"
  else if (v6) document.getElementById(layerid).style.visibility = "hidden";
  else if (ie4) document.all[layerid].style.visibility = "hidden"
  }

</script>

<!--Button-->

<div style="position:absolut;margin-top:0px;margin-left:20;">

<a href="irgendwohin" onmouseover="showlayer('tip01');" onmouseout="hidelayer('tip01');"><img src="Button1.gif" width="122" height="78" border="0" alt="1" vspace="30"></a>

<img src="Button2.gif" width="122" height="78" border="0" alt="2" vspace="25">
<img src="Button3.gif" width="122" height="78" border="0" alt="3" vspace="20">
<img src="Button4.gif" width="122" height="78" border="0" alt="4" vspace="15">
<img src="Button5.gif" width="122" height="78" border="0" alt="5" vspace="10">
</div>

Aber wo oder wie muß ich den erklärenden Text für die Buttons definieren.

Meine Idee war:

<div id="tip01" style="position:absolute; left: 10px; top:20px; width:100px;">Tooltipp-Text</div>

Aber wo? Oder ist das alles sowieso falsch?

Bin für jede Hilfe dankbar!!!

Ciao Elayna

[Oliver]

Hallo Elayna,

Bei mehreren verschiedenen Button soll jeweils ein anderer erklärender Text erscheinen, wenn der Benutzer mit der Mouse darüberfährt. Gleichzeitig sollen die Button auch als Links fungieren.

Für solche Texte gibt es doch das Attribut title.
Z.B. <img src="Button2.gif" width="122" height="78" border="0" alt="2" vspace="25" title="anzuzeigender Text">

Der Text, der als Wert bei title steht, müsste angezeigt werden, wenn der Benutzer mit der Maus über dem Bild stehen bleibt.

Oliver

[Elayna]

Hallo Oliver!

Für solche Texte gibt es doch das Attribut title.
Z.B. <img src="Button2.gif" width="122" height="78" border="0" alt="2" vspace="25" title="anzuzeigender Text">

Richtig, allerdings nicht im 4er Netscape - und da soll es auch funktionieren. Ginge zwar mit dem alt-Attribut, ist aber nicht der Sinn dessen.

Ciao Elayna

[Oliver]

Ok, dann geb ich Dir voll und ganz Recht.

[Stefan Bach]

Hallo!

Ich stecke total fest! (Newbie)
Folgendes Problem:
Bei mehreren verschiedenen Button soll jeweils ein anderer erklärender Text erscheinen, wenn der Benutzer mit der Mouse darüberfährt.

Zumindest bei mir zeigt der IE den alt="" Text von Grafiken als Tooltip an, wenn ich mit der Maus darüber fahre.
Des weiteren gibt es noch das title="" Attribut. Da weiß ich allerdings auch nur, dass es der IE auf jeden Fall als Tooltip anzeigt, wie sich andere Browser verhalten habe ich nicht getestet. (Da hier grad keine installiert sind.)

Gruß,
    Stefan

[Kai Lahmann]

hi

Zumindest bei mir zeigt der IE den alt="" Text von Grafiken als Tooltip an, wenn ich mit der Maus darüber fahre.
Des weiteren gibt es noch das title="" Attribut. Da weiß ich allerdings auch nur, dass es der IE auf jeden Fall als Tooltip anzeigt, wie sich andere Browser verhalten habe ich nicht getestet. (Da hier grad keine installiert sind.)

IE (hat sich der 6er das immer noch nicht abgewöhnt..?) und Netscape 4 missbrauchen alt="" bei Bildern als Tooltipp.
title="" funktioniert in IE4/5/6, Opera, konqueror, Mozilla/Netscape 6.x

gruss Kai

[Markus Thomas]

Hallo!,

sieh dir mal <> an.

Gruß Markus

[Markus Thomas]

Sorry,

sieh dir mal http://www.pc-anfaenger.de/script/jsdown.htm an

MArkus

[flo]

Hallo Elayna !

Habe hier ein kleines Code-Beispiel !

------------------------------------------------------------------
<html>
<title>blabla</title>
<head>
<style>
.BubbleClass { text-color: #000000; background-color: #ffff80; }
#bubble{ position: absolute; left: 145px; top:  0px; height:10px; visiblity: hidden; z-index:10; }
</style>
<script language="JavaScript">
<!--
var mx=0;
var my=0;
isNetscape = false;
function watch_mouse(e)
{
if (isNetscape)
{
mx = e.x;
my = e.y;
}
else
{
mx = window.event.x;
my = window.event.y;
}
}

function ShowBubble(text)
{
if (isNetscape)
{
with (document.bubble.document)
{
open();
write("<span class='BubbleClass'>" + text +"</span>");
close();
}
document.bubble.left = mx;
document.bubble.top  = my +10;
document.bubble.visibility = "SHOW";
}
else
{

bubble.style.left = mx;
bubble.style.top  = my +10;
document.all.bubble.innerHTML = "<table border=0><tr><td><span class='BubbleClass'>" + text +"</span></td></tr></table>";

bubble.style.visibility = "visible";
}
}

function HideBubble()
{
if (isNetscape)
{
document.bubble.visibility = "HIDE";
}
else
{
bubble.style.visibility = "hidden";

}
}

function init()
{
if (navigator.appName =="Netscape") {
isNetscape = true;
}
BrowserVar = parseFloat(navigator.appVersion);
if (BrowserVar < 4)
{
return;
}

if (isNetscape)
{
document.captureEvents(Event.MOUSEMOVE);
}

document.onmousemove = watch_mouse;
HideBubble();
}

function dummy()
{
}

//--->
</script>
</head>
<body onload="init()">
<ol>
  <div id="bubble"><p>..... </p>
  </div><p align="center">wenn man mit der Maus über diesen <a
  onmouseover="ShowBubble('hier geht es zur SELF HTML aktuell')" onmouseout="HideBubble()"
  href="http://selfaktuell.teamone.de/">Link</a> geht, dann erscheint eine Zusatzinformation<br>
  </p>
</ol>
</body>
</html>

--------------------------------------------------------------------

Hoffe das hilft weiter.

Grüsse

Flo

[Elayna]

Hallo,

danke erstmal für den Code.

Mal sehen, ob ich´s hinbekomme.

Ciao Elayna

[Kai Lahmann]

hi

da fehlt die Funktion für DOM-Fähige Browser (IE5/6, Mozilla, konqueror, Opera)

Außerdem ist deine Netscape4-Abfrage estrem umständlich - if(document.layers) ist 100%tig.

gruss Kai

[Sven Rautenberg]

Moin!

Ich stecke total fest! (Newbie)

Passiert schonmal. :)

Folgendes Problem:
Bei mehreren verschiedenen Button soll jeweils ein anderer erklärender Text erscheinen, wenn der Benutzer mit der Mouse darüberfährt. Gleichzeitig sollen die Button auch als Links fungieren. Bis jetzt habe ich ein Script und die Button in der gewünschten Anordnung.

Dann ist also alles so, wie es sein soll, nur der Tooltipp fehlt noch?

<script type="text/javascript">

[ein schönes, funktionierendes Skript gelöscht - den Code hab' z.B. ich hier mehrfach gepostet - daran liegts nicht ;) ]

</script>

<!--Button-->

<div style="position:absolut;margin-top:0px;margin-left:20;">

<a href="irgendwohin" onmouseover="showlayer('tip01');" onmouseout="hidelayer('tip01');"><img src="Button1.gif" width="122" height="78" border="0" alt="1" vspace="30"></a>

Das hier ist EIN Button.

<img src="Button2.gif" width="122" height="78" border="0" alt="2" vspace="25">
<img src="Button3.gif" width="122" height="78" border="0" alt="3" vspace="20">
<img src="Button4.gif" width="122" height="78" border="0" alt="4" vspace="15">
<img src="Button5.gif" width="122" height="78" border="0" alt="5" vspace="10">
</div>

Und bei diesen Buttons fehlen die Links. Kommt vermutlich noch...

Aber wo oder wie muß ich den erklärenden Text für die Buttons definieren.

Meine Idee war:

<div id="tip01" style="position:absolute; left: 10px; top:20px; width:100px;">Tooltipp-Text</div>

Dahinter, davor, irgendwohin in den HTML-Text - das ist für die Darstellung reichlich egal. Lediglich für javascriptlose und CSS-unfähige Browser solltest du schauen, wo im Quelltext du den Tooltipp-Text unterbringst - du hast grundsätzlich die Wahlfreiheit, den Text an beliebiger Stelle unterzubringen - nur nicht unbedingt innerhalb des <div> mit den Buttons.

Aber wo? Oder ist das alles sowieso falsch?

Ich denke, du bist bislang auf genau dem richtigen Weg. Einfach mal machen und probieren - wenn was nicht klappt, mit Fehlermeldung oder Fehlerbeschreibung wieder hier melden.

- Sven Rautenberg

[Elayna]

Hallo Sven!!!

<script type="text/javascript">

»»[ein schönes, funktionierendes Skript gelöscht - den Code hab'
»»z.B. ich hier mehrfach gepostet - daran liegts nicht ;) ]

</script>

Ja - danke Dir dafür! Habe ich im Archiv aufgestöbert.

Immerhin wird der ToolTop-Text jetzt angezeigt - nur leider auch schon beim Aufrufen der Seite.

Hast Du noch einen Tip für mich?

Ciao Elayna

[Sven Rautenberg]

Hallo Sven!!!

<script type="text/javascript">
»»[ein schönes, funktionierendes Skript gelöscht - den Code hab'
»»z.B. ich hier mehrfach gepostet - daran liegts nicht ;) ]
</script>

Ja - danke Dir dafür! Habe ich im Archiv aufgestöbert.

Immerhin wird der ToolTop-Text jetzt angezeigt - nur leider auch schon beim Aufrufen der Seite.

visibility:hidden in die Styledefinition mit reinpacken. Dann wird der Text versteckt (= nicht angezeigt), und erst beim Mouseover wird er durch das Javascript sichtbar.

Ach ja: Weil du mit CSS arbeitest, nutze doch einfach die Vorteile von CSS: Zentrale Definition von Styles.

Das würde bedeuten, daß dein Tooltip beispielsweise so aussieht:
<div id="tip01" class="tooltip">Tooltiptext 1</div>
<div id="tip02" class="tooltip">Tooltiptext 2</div>

Und als CSS-Definition mußt du jetzt nur noch die Formatierung festlegen (in einer externen Datei, oder in einem Abschnitt <style> in dieser Datei):
.tooltip { font-family:Arial,sans-serif; font-size:10px; color:red; width:100px; visibility:hidden; }
#tip01 { position:absolute; left:10px; top:20px; }

Alles, was allgemein für alle Tooltipps gelten soll, definierst du in der Klasse "tooltip". Also Schriftart, Farbe, Hintergrundfarbe, Rahmen etc.

Alles, was den einzelnen Tooltip betrifft (und das dürfte außer seiner Position garnichts sein), das wird in der ID definiert. Wenn du diese Definition in eine externe Datei packst, mußt du Änderungen nur einmal machen: Sei es, daß du eine andere Schriftart haben willst, oder daß sich die Position ändert.

- Sven Rautenberg

[Elayna]

Hallo Sven!!!

Oh mann - visibility:hidden; - das war´s !!!
Ein riesen Dankeschön!!!!!!!!!

Das mit den CSS-Definitionen hatte ich gerade erledigt-dank SelfHTML
:o)

Nochmal DANKE!!!!

Ciao Elayna