anpera.net

anpera.net

experimental server @home
Aktuelle Zeit: Do 28 Mär, 2024 12:05

Alle Zeiten sind UTC + 1 Stunde




Ein neues Thema erstellen Auf das Thema antworten  [ 35 Beiträge ]  Gehe zu Seite 1, 2  Nächste

Eine einfache Bewertung des CSS "OnMouseOver" Tooltip. (Schulnoten)
Sehr Gut 24%  24%  [ 4 ]
Gut 29%  29%  [ 5 ]
Befriedigend 29%  29%  [ 5 ]
Ausreichend 6%  6%  [ 1 ]
Mangelhaft 6%  6%  [ 1 ]
Ungenügend 6%  6%  [ 1 ]
Abstimmungen insgesamt : 17
Autor Nachricht
 Betreff des Beitrags: OnMouseOver Css Tooltip
BeitragVerfasst: Mi 02 Jan, 2008 22:31 
Offline
Freak
Freak
Benutzeravatar

Registriert: Di 01 Mai, 2007 13:57
Beiträge: 1634
Wohnort: Dortmund.
Geschlecht: Männlich
LoGD: Lokal.
Skype: josh.hoiul
Guten Abend.

Derzeit entwerfe ich "wie viele andere auch" ein Template für LotGD. (Nein nicht für den Wetbewerb, hatte damit schon etwas früher angefangen.)

Nun Bilder usw. waren fertig, da musste ich mich etwas mit CSS befassen. Dort bin ich hier und da auf verschiedene Seiten mit Tutorials gestoßen. Auf einer dieser Seiten fand ich ein CSS Tooltip das ich persönlich sehr schön finde.

Sobald Ihr oder ein anderer über einen Link fährt, bekommt er per "OnMouseOver" Effekt dieses Tooltipp zu sehen. Natürlich mit dem darin versehen Text. Damit könnt ihr z.B. die Commentary Navs verzieren etc. etc.!

Quelle: Buenos Dias Elias [ Irgendwie lolig :D ]
Demo: [Demo nicht mehr zugänglich!

Damit wir den Code nicht auf jede einzelne Seite eintragen müssen, hier mal der Einbau:


$this->bbcode_second_pass_code('', '/* Tooltip */

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 100;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Smal;
text-align: left;
}')

Fügt Ihr in die CSS Datei eures Templates ein. Ich nehme als Beispiel mal... Das Template Yarbrough.

Ihr sucht:


$this->bbcode_second_pass_code('', '.navhi {
color: #00FF00;
text-decoration: underline;
}')

Und fügt denn oben genannten Code ein.

Abspeichern und hochladen. Nun kennt das Template die CLASS "tooltip".

Aber wie schafen wir es nun das bei dem Link ein Tooltip kommt?

Nun... Es hat mich erlich gesagt verwirrt. :roll:
Hatte letztens noch ein wenig rum Experimentiert... Bis ich endlich geschnallt habe, das nach dem "Link-Name" ein "<span>" kommen muss. :warn:

Das sieht dann so aus:


    Rawoutput

$this->bbcode_second_pass_code('', 'rawoutput('<a href="link" class="tooltip">Link-Name <span><b>Link-Name:</b><br />The text</span></a>');')

    Output

$this->bbcode_second_pass_code('', 'output('<a href="link" class="tooltip">Link-Name <span><b>Link-Name:</b><br />The text</span></a>',true);')

    Addnav

$this->bbcode_second_pass_code('', 'addnav('','link');')

Das Addnav muss bei beiden Varianten dabei sein. ;)

Wie ändere ich die Farbe des Linken Streifens?

Du suchst:


$this->bbcode_second_pass_code('', 'border-left: 4px solid #4dbcf3;')

und änderst die Solid Farbe. Des weiteren kannst du in der Zeile auch die Solid breite einstellen.


Sollten Fragen dazu sein, wie man es mit der commentary macht. Stellt diese.

MySQL.

_________________
Never change a running system. Bullshit! ;)


Zuletzt geändert von MySql am Fr 18 Jan, 2008 12:04, insgesamt 3-mal geändert.

Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 03 Jan, 2008 06:39 
Offline
Held
Held
Benutzeravatar

Registriert: Di 21 Aug, 2007 23:04
Beiträge: 290
Wohnort: Darmstadt
Geschlecht: Männlich
Du kannst mit dem onmouseover und z.B. onmouseout wirklich ein paar tolle Sachen machen, z.B. 2 unterschiedliche Bilde anzeigen lassen und und und ...

_________________
Legend of the Green Dragon - Die Mysterien um Ched Nasad


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 03 Jan, 2008 14:31 
Offline
Freak
Freak

Registriert: Mo 06 Sep, 2004 15:17
Beiträge: 3236
Geschlecht: Männlich
Ich weiss ja nicht, WO du diese Schulnoten anordnung her hast, aber die letzten zwei unteren sind definitiv Falsch. . . Seit wann kommt die 6 vor der 5?!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 03 Jan, 2008 15:56 
Offline
Held
Held
Benutzeravatar

Registriert: Di 21 Aug, 2007 23:04
Beiträge: 290
Wohnort: Darmstadt
Geschlecht: Männlich
Kevz hat geschrieben:
Ich weiss ja nicht, WO du diese Schulnoten anordnung her hast, aber die letzten zwei unteren sind definitiv Falsch. . . Seit wann kommt die 6 vor der 5?!


Des is mir gar net aufgefallen^^
hab auch nicht abgestimmt^^

_________________
Legend of the Green Dragon - Die Mysterien um Ched Nasad


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 03 Jan, 2008 17:53 
Offline
Freak
Freak
Benutzeravatar

Registriert: Di 01 Mai, 2007 13:57
Beiträge: 1634
Wohnort: Dortmund.
Geschlecht: Männlich
LoGD: Lokal.
Skype: josh.hoiul
^^Hatte es nicht mehr im Kopf und hatte mal in ein ehemaliges Mathe Heft geschaut. ^^ Dann steht es dort falsch drin. :dumm:

Habe es nun geändert.^^

_________________
Never change a running system. Bullshit! ;)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 03 Jan, 2008 18:50 
Offline
Held
Held
Benutzeravatar

Registriert: Di 21 Aug, 2007 23:04
Beiträge: 290
Wohnort: Darmstadt
Geschlecht: Männlich
Oder du hast einfach die 6 in der Mathearbeit mit einer 5 verwechselt^^

_________________
Legend of the Green Dragon - Die Mysterien um Ched Nasad


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 03 Jan, 2008 18:52 
Offline
Freak
Freak
Benutzeravatar

Registriert: Di 01 Mai, 2007 13:57
Beiträge: 1634
Wohnort: Dortmund.
Geschlecht: Männlich
LoGD: Lokal.
Skype: josh.hoiul
Ne hab jetzt extra nochmal nach gesehen.^^ Des Heft hat nen Fehler.

_________________
Never change a running system. Bullshit! ;)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 10 Jan, 2008 16:18 
Offline
Profi
Profi
Benutzeravatar

Registriert: Do 17 Feb, 2005 18:34
Beiträge: 192
Wohnort: Saarland
Geschlecht: Männlich
LoGD: http://www.die-legende-des-drachen.de/
Skype: foren.tom88
Wie funktioniert das mit den Addnavs ?
Mache das andauernd falsch. output funzt bei mir auch net...nur wenn ich ein "raw" vor das output schreibe ^^

Grüße
Tom

_________________
you can loose your money, you can loose your life, but you never forget your real friends!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 10 Jan, 2008 18:08 
Offline
Freak
Freak
Benutzeravatar

Registriert: Di 01 Mai, 2007 13:57
Beiträge: 1634
Wohnort: Dortmund.
Geschlecht: Männlich
LoGD: Lokal.
Skype: josh.hoiul
Artmis... wenn du einen Hyperlink im Output setzt, musst du natürlich beim schließen den outputs ein ,true anhängen.

$this->bbcode_second_pass_code('', 'output('<a href="link" class="tooltip">Link-Name <span><b>Link-Name:</b><br />The text</span></a>',true);')

Habe dies im Obrigen Beitrag vergessen, werde es sofort berichtigen. Wie meinst du das mit den Adnnavs?oO

_________________
Never change a running system. Bullshit! ;)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 10 Jan, 2008 18:19 
Offline
Held
Held
Benutzeravatar

Registriert: So 19 Nov, 2006 09:57
Beiträge: 231
Geschlecht: Weiblich
LoGD: http://www.trahhenbluot.de/Planetenchaos/source.php
auch bei den addnavs muss ein false und true dahinter

Bsp:
addnav('Hier','hier.php',false,true);

_________________
Das Lesen im Bett zeugt von völliger Hingabe an die Kunst: Man überlässt es dem Dichter, wann man einschläft.
Ernst R. Hauschka, deutscher Aphoristiker (geb. 1926)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 10 Jan, 2008 18:29 
Offline
Freak
Freak
Benutzeravatar

Registriert: Di 01 Mai, 2007 13:57
Beiträge: 1634
Wohnort: Dortmund.
Geschlecht: Männlich
LoGD: Lokal.
Skype: josh.hoiul
Also auf meinem Testserver nicht. Gehts auch ohne ,false,true Oo

War ,false,true net für ein Popup gedacht? (,false,true / ,false,false,true) o.o'

_________________
Never change a running system. Bullshit! ;)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Do 10 Jan, 2008 19:57 
Offline
Held
Held
Benutzeravatar

Registriert: So 19 Nov, 2006 09:57
Beiträge: 231
Geschlecht: Weiblich
LoGD: http://www.trahhenbluot.de/Planetenchaos/source.php
stimmt ... nur ist die Frage, wenn es bei output eines true bedarfs ... dann doch in einem addnav ebenfalls, denn dort werden html-Befehle nicht ohne weiters unterstützt.

_________________
Das Lesen im Bett zeugt von völliger Hingabe an die Kunst: Man überlässt es dem Dichter, wann man einschläft.
Ernst R. Hauschka, deutscher Aphoristiker (geb. 1926)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 10:16 
Offline
Profi
Profi
Benutzeravatar

Registriert: Do 17 Feb, 2005 18:34
Beiträge: 192
Wohnort: Saarland
Geschlecht: Männlich
LoGD: http://www.die-legende-des-drachen.de/
Skype: foren.tom88
addnav('Hier','hier.php',false,true);

Das is doch für ein neues Fenster!
Ich wollte aber wissen wie man einen Tooltip mit den Addnavs verknüpft.

grüße
Tom

_________________
you can loose your money, you can loose your life, but you never forget your real friends!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 11:02 
Offline
Held
Held
Benutzeravatar

Registriert: So 19 Nov, 2006 09:57
Beiträge: 231
Geschlecht: Weiblich
LoGD: http://www.trahhenbluot.de/Planetenchaos/source.php
Verstehe ich das richtig? Du möchtest ein onMouseOver-Tooltipp, wenn man auf den addnav geht?

eventuell so: addnav('<a href="link" class="tooltip">Bespiel</a>','hier.php',true);

und schlagt mich nicht gleich ... ist nur ein Vorschlag! (da bisher nur der Tooltipp für outputs besprochen wurde und nicht für addnavs)

_________________
Das Lesen im Bett zeugt von völliger Hingabe an die Kunst: Man überlässt es dem Dichter, wann man einschläft.
Ernst R. Hauschka, deutscher Aphoristiker (geb. 1926)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 11:26 
Offline
Freak
Freak

Registriert: So 29 Jan, 2006 09:41
Beiträge: 1927
Wohnort: Schweiz
Geschlecht: Männlich
Skype: louis.huppenbauer
$this->bbcode_second_pass_code('', 'addnav('<div class="tooltip">Bespiel<span>Und hier der ToolTip-Text</span></div>','hier.php',true,false,true);')
Dies wäre für ein neues Fenster.

$this->bbcode_second_pass_code('', 'addnav('<div class="tooltip">Bespiel<span>Und hier der ToolTip-Text</span></div>','hier.php',true,true);')
Dies wiederum wäre für ein PopUp

Zumindest glaube ich das. Ist allerdings nicht getestet.


Der erste Parameter der addnav-Funktion steht für den Namen, der zweite für die Datei, der Dritte fungiert als HTML-Schalter, der vierte als PopUp-Schalter und der fünfte als Neue-Seite-Schalter ^^. Steht zumindest so in meiner addnav-Funktion.

Man kann im übrigen auch ganz leicht mit JavaScript ein schönes ToolTip erstellen. Bei Interesse einfach melden.

Mit freundlichen Grüssen,
Harthas


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 11:48 
Offline
Freak
Freak
Benutzeravatar

Registriert: Mi 06 Jul, 2005 19:10
Beiträge: 543
Wohnort: Bremen
Geschlecht: Männlich
LoGD: http://my-logd.com/motwd
Hier gibts ne nette JavaScript-Bibliohtek zm freien Download: http://www.walterzorn.de/tooltip/tooltip.htm

_________________
Das schwarze Schaf der LotGD-Community, 2. platzierter, beim Giga.de Homepage-Award 2007 und 1. platzierter beim German Web Award 2008.
PC-ACTION meint: "Sehr gut" für MotWD!
Mind of the White Dragon => http://my-logd.com/motwd


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 11:59 
Offline
Freak
Freak

Registriert: So 29 Jan, 2006 09:41
Beiträge: 1927
Wohnort: Schweiz
Geschlecht: Männlich
Skype: louis.huppenbauer
Kenne ich.
Ist mir allerdings zu viel Quellcode. Geht um einiges einfacher.

Man hat dadurch natürlich auch um einiges weniger Möglichkeiten, aber mir genügts. Webmatze-JS-ToolTips


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 15:41 
Offline
Profi
Profi
Benutzeravatar

Registriert: Do 17 Feb, 2005 18:34
Beiträge: 192
Wohnort: Saarland
Geschlecht: Männlich
LoGD: http://www.die-legende-des-drachen.de/
Skype: foren.tom88
Harthas hat geschrieben:
$this->bbcode_second_pass_code('', 'addnav('<div class="tooltip">Bespiel<span>Und hier der ToolTip-Text</span></div>','hier.php',true,false,true);')
Dies wäre für ein neues Fenster.

$this->bbcode_second_pass_code('', 'addnav('<div class="tooltip">Bespiel<span>Und hier der ToolTip-Text</span></div>','hier.php',true,true);')
Dies wiederum wäre für ein PopUp

Zumindest glaube ich das. Ist allerdings nicht getestet.


Der erste Parameter der addnav-Funktion steht für den Namen, der zweite für die Datei, der Dritte fungiert als HTML-Schalter, der vierte als PopUp-Schalter und der fünfte als Neue-Seite-Schalter ^^. Steht zumindest so in meiner addnav-Funktion.

Man kann im übrigen auch ganz leicht mit JavaScript ein schönes ToolTip erstellen. Bei Interesse einfach melden.

Mit freundlichen Grüssen,
Harthas

Auf der Index.php funktioniert es nicht. Da zeigt er mir den Quellcode an!
Was mach ich falsch ?

Grüße
Tom

_________________
you can loose your money, you can loose your life, but you never forget your real friends!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 16:10 
Offline
Freak
Freak

Registriert: So 29 Jan, 2006 09:41
Beiträge: 1927
Wohnort: Schweiz
Geschlecht: Männlich
Skype: louis.huppenbauer
Funktioniert es nur auf dem Index nicht?


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: OnMouseOver Css Tooltip
BeitragVerfasst: Fr 11 Jan, 2008 16:14 
Offline
Profi
Profi
Benutzeravatar

Registriert: Do 17 Feb, 2005 18:34
Beiträge: 192
Wohnort: Saarland
Geschlecht: Männlich
LoGD: http://www.die-legende-des-drachen.de/
Skype: foren.tom88
Überall funzt es nciht!
Auch in der Village funzt es nicht!

Grüße
Tom

_________________
you can loose your money, you can loose your life, but you never forget your real friends!


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 35 Beiträge ]  Gehe zu Seite 1, 2  Nächste

Alle Zeiten sind UTC + 1 Stunde


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 41 Gäste


Du darfst keine neuen Themen in diesem Forum erstellen
Du darfst keine Antworten zu Themen in diesem Forum erstellen
Du darfst deine Beiträge in diesem Forum nicht ändern
Du darfst deine Beiträge in diesem Forum nicht löschen
Du darfst keine Dateianhänge in diesem Forum erstellen

Suche nach:
Gehe zu:  
cron
POWERED_BY
Deutsche Übersetzung durch phpBB.de
anpera.net - Impressum