Hovertext - Wie lösbar?

**Maisaffe** · 06.08.2005 15:20

Bei Gamestar (mir einzigstes eingefallenes Beispiel) gibt es solche "hovertexte".
Beispiel:
http://www.gamestar.de/news/branchen/27299/index.html
"Games" und "GTA" zeigen, beim überfahren mit der Maus, Werbung an.
Wie kann ich auch solche "Hovertexte" erstellen die sofort erscheinen?
Per <tag title="titel erscheint erst nach 1-3 Sekunden verweilen auf dem Text>text</tag> klappt das ganze nicht so toll, da man auf dem text länger verweilen muss.

Per CSS könnte das vllt. lösbar sein, aber etwas kompliziert stelle ich mir das vor.

Trotzdem: Ich nehme jede Möglichkeiten zur Darstellung solcher "Hovertexte" an.

Dennis

**NPC Fighter** · 06.08.2005 15:37

Bin en HTML Noob, aber vielleicht mit <abbr> ?

**Maisaffe** · 06.08.2005 15:54

Zitat von NPC Fighter

Bin en HTML Noob, aber vielleicht mit <abbr> ?

Nein, ich will den Text nicht betonen. Ich möchte wissen wie diese Werbe-im-Browser-"Pop-Ups" dargestellt werden.

Dennis

**Fixxer** · 06.08.2005 16:00

das ganze nennt sich IntelliTXT und ist von der Firma Vibrant Media.

mehr infos zB gibts unter http://www.computerbase.de/intellitxt/

**Milchbox** · 06.08.2005 16:03

also ich hab mir mal den source von dem fenster angeguckt und festgestellt:der text und die links werden von einem script von einer anderen website, die diesen dienst anbietet, eingeblendet.
mit css ist das möglich nur das dauert etwas.ich hab etwas gefunden, auf self-html was dir helfen kann: Hier klicken

**dead_orc** · 06.08.2005 16:05

Dazu fällt mir nur Javascript ein. Solche Werbung gibt es irgendwie auf immer mehr Webseiten. Leider ist die Seite so voll davon, dass ich dir nicht sagen kann, welcher der Blöcke da dafür zuständig ist...
Ehrlich muss ich zugeben, dass ich aber auch nur einen sehr kleinen Teil des Codes nachproduzieren könnte. Ich habe es nicht hinbekommen, die Mauskoordinaten abzufragen, um das Kästchen dort erscheinen zu lassen... (sollte wohl irgendwie mit onmouseover="show('rockstar ist toll und bla und text');" funktionieren, wo dann die Funktion an den Mauskoordinaten ein div-Element mit fester Breite und Höhe erstellt)

[EDIT]
Hm, mit CSS könnte es auch sein, aber ich tippe trotzdem auf JS...

[EDIT²]
Der Beweis, dass es nicht mit CSS ist: Die CSS-Version ist für moderne Browser (also nicht den IE, in dem es nämlich auch nicht funktioniert). AFAIK gibt es auch keine andere Möglichkeit, dem IE das per CSS beizubringen. Aber die Links auf Gamestar funktionieren im IE o_O

**Maisaffe** · 06.08.2005 16:12

Zitat von Milchbox

also ich hab mir mal den source von dem fenster angeguckt und festgestellt:der text und die links werden von einem script von einer anderen website, die diesen dienst anbietet, eingeblendet.
mit css ist das möglich nur das dauert etwas.ich hab etwas gefunden, auf self-html was dir helfen kann: Hier klicken

Der Code ist toll, ich zitiere aus dem ICQ Gespräch mit dead_orc:

Code:

dennis_meckel (05:09 PM) : 
haha *rofl xD §ugly gagaga *rumspringt im kreis

Also der Code ist irgendwie etwas überdimensioniert. ^^°
Wenn man den kürzen würde auf nur eins dieser Pop Ups wäre er bestimmt immer noch groß. Aber mal ein fettes Danke. Ich werde mal noch in einem anderem Forum nachfragen gehen müssen.

Dennis

Edit:
http://www.webmaster-resource.de/tri...-erstellen.php
Da ist die JS Lösung.

**Maisaffe** · 06.08.2005 16:39

Muss mal Doppelposten.
Also die Lösung dich ich gefunden habe ist schonmal gut. Aber es wäre nett wenn jemand noch eine Lösung wie auf Gamestar kennt/ finden würde.
Dann könnte ich in den Pop Up auch Links rein machen usw. die ich verwenden kann.

Dennis

**Manni** · 06.08.2005 17:08

Ich habe es hier mit den Links in der Navigation so gemacht: http://mannithedark.ma.funpic.de/Designs/5/
Du musst nur zB einen span in den Link reinpacken, der beim drüberfahren sichtbar wird:

HTML-Code:

<a href="#" class="tooltiplink">
Der Link
<span class="tooltip">Dein Tooltip <b>auch mit HTML</b>!!!</span>
</a>

Das passende CSS:

HTML-Code:

span.tooltip {
  display: none;
  border: 1px solid #000000;
  background: #FFFFFF;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  color: #1F1F1F;
}

a.tooltiplink:hover span.tooltip {
  display: block;
}

Ist ungetestet, sollte aber klappen...

**Maisaffe** · 06.08.2005 17:43

Zitat von Manni_the_Dark

Ich habe es hier mit den Links in der Navigation so gemacht: http://mannithedark.ma.funpic.de/Designs/5/
Du musst nur zB einen span in den Link reinpacken, der beim drüberfahren sichtbar wird:

HTML-Code:

<a href="#" class="tooltiplink">
Der Link
<span class="tooltip">Dein Tooltip <b>auch mit HTML</b>!!!</span>
</a>

Das passende CSS:

HTML-Code:

span.tooltip {
  display: none;
  border: 1px solid #000000;
  background: #FFFFFF;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  color: #1F1F1F;
}

a.tooltiplink:hover span.tooltip {
  display: block;
}

Ist ungetestet, sollte aber klappen...

Coole Kurze Lösung! Aber leider ist der IE mal wieder etwas, ich nennes Wiederstrebend.

Dennis

**Fixxer** · 06.08.2005 18:10

weil er hover nur für a kennt
alternativ kannst du das display-attributauch über javascript ändern

ungefähr so (muss nicht stimmen)

Code:

das js

function spamin(id) {
document.getElementById(id).style.display = "block"
}

function spamout(id) {
document.getElementById(id).style.display = "none"
}

<a href="" onmouseover="spamin('text1')" onmouseout="spamout('text1')">Text <span style="display:none" id="text1">sadasdasd</span></a>

nachteil der ganzen methode jetzt ist aber das sih dein layout unschön verzieht, da die spanbox nicht über den anderen elementen liegt sondern mittendrin, müsste man evtl. noch mit z-index arbeiten um das zu verhindern

aber ich denk ma die lösung von der Firma Vibrant Media (von der stammt diese Sponsoren-Links Geschichte) wird die beste sein als das css gedöns hier

mehr infos unter: http://www.computerbase.de/intellitxt/

**Manni** · 06.08.2005 18:19

Beim IE hilft nur JS:
HTML:

HTML-Code:

<a href="#" class="tooltiplink" onMouseOver="tooltip('1', true)" onMouseOut="tooltip('1', false)">
Der Link
<span id="1" class="tooltip">Dein Tooltip <b>auch mit HTML</b>!!!</span>
</a>

JS:

HTML-Code:

function tooltip(id, show) {
  if(document.all) {
    if(show) {
      document.getElementById(id).style.display='block';
    } else {
      document.getElementById(id).style.display='none';
    }
  }
}

CSS:

HTML-Code:

span.tooltip {
  display: none;
  border: 1px solid #000000;
  background: #FFFFFF;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  color: #1F1F1F;
  text-decoration: none;
  position: relative;
  left: 20px;
  top: 10px;
  z-index: 5;
  width: 200px;
  height: 50px;
}

a.tooltiplink:hover span.tooltip {
  display: block;
}

Dieses Mal ist es getestet

**Maisaffe** · 06.08.2005 19:08

Zitat von Manni_the_Dark

Dieses Mal ist es getestet

Nicht schlecht!

Aber das Problem:

HTML-Code:

<html>
<head>
<title>Tool-Tip mit eigenen Farben und Schriftarten erstellen</title>
<style type="text/css">
<!--
span.tooltip {
  display: none;
  border: 1px solid #000000;
  background: #FFFFFF;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  color: #1F1F1F;
  text-decoration: none;
  position: relative;
  left: 20px;
  top: 10px;
  z-index: 5;
  width: 200px;
  height: 50px;
}

a.tooltiplink:hover span.tooltip {
  display: block;
}
}
-->
</style>
<script language="javascript">
<!--
function tooltip(id, show) {
  if(document.all) {
    if(show) {
      document.getElementById(id).style.displa  y='block';
    } else {
      document.getElementById(id).style.displa  y='none';
    }
  }
}
-->
</script>

</head>
<body>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 <a href="#" class="tooltiplink" onMouseOver="tooltip('1', true)" onMouseOut="tooltip('1', false)"> Der Link <span id="1" class="tooltip">Dein Tooltip <b>auch mit HTML</b>!!!</span> </a>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp;&nbsp;&nbsp;
</body>
</html>

Schaus Dir mal an und fahr mit der Maus über den Link.

Find ich nicht gut.
Ich hab es auch mal mit div stats span auspobiert, aber der z-index funktioniert irgendwie nicht.

Dennis

**Manni** · 06.08.2005 21:15

Probier's mal mit

HTML-Code:

position: absolute;
left: inherit;
top: inherit;

statt der Geschichte mit der relativen Positionierung. Allerdings sieht das dann im IE und FF nicht gleich aus. Beim FF ist es unter dem Link, beim IE rechts daneben.

**Maisaffe** · 06.08.2005 21:30

Klappt nicht. Der ganze Code funktioniert auch nicht per JS im IE!?
Komisch, ich dachte das vorhin der Code im IE auch ging.

Kannst Du das nochmal selbst erstellen und auf deine seite hochladen als Beispiel?

Dennis

**Manni** · 06.08.2005 22:10

Hmm. Joa - meine Datei
Klappt bei mir (mehr oder weniger) einwandfrei im IE 6.0 SP 2 und FF 1.0.4

**Maisaffe** · 07.08.2005 08:54

Zitat von Manni_the_Dark

Hmm. Joa - meine Datei
Klappt bei mir (mehr oder weniger) einwandfrei im IE 6.0 SP 2 und FF 1.0.4

Bei mir geht es nicht im MFF1.0.4 und O8, ich hab den Kasten immer ganz links. Unter IE klappt es prima.

Dennis

Thema: Hovertext - Wie lösbar?

Themen-Optionen

Anzeige

Hovertext - Wie lösbar?

Berechtigungen