PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : 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
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 (http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern)
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
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 (http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern)
Der Code ist toll, ich zitiere aus dem ICQ Gespräch mit dead_orc:

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/tricks/javascript/tool-tip-mit-eigenen-farben-und-schriftarten-erstellen.php
Da ist die JS Lösung. http://www.multimediaxis.de/images/smilies/old/1/ugly.gif
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:

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

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
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:

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

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)



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:

<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:

function tooltip(id, show) {
if(document.all) {
if(show) {
document.getElementById(id).style.display='block';
} else {
document.getElementById(id).style.display='none';
}
}
}
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;
}

Dieses Mal ist es getestet ;)
Maisaffe
06.08.2005, 19:08
Dieses Mal ist es getestet ;)
Nicht schlecht!

Aber das Problem:

<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. :rolleyes:
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
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 (http://mannithedark.ma.funpic.de/hover_tooltip.html)
Klappt bei mir (mehr oder weniger) einwandfrei im IE 6.0 SP 2 und FF 1.0.4 ;)
Maisaffe
07.08.2005, 08:54
Hmm. Joa - meine Datei (http://mannithedark.ma.funpic.de/hover_tooltip.html)
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. :rolleyes:
Dennis