[Suche] Wie erscheint der ToolTip ?=


  • da_makkus
  • 1349 Aufrufe 9 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [Suche] Wie erscheint der ToolTip ?=

    Hallooo,

    ich bin gerade auf der Seite

    //LUDK.DE - GESTALT UND DESIGN

    gesurft. Wenn man über die Grafik mit dem Surfer fährt, erscheint ein kleiner schwarzer "Tooltip". Wie krieg ich den auch auf meiner Seite zum laufen ?=
    Ich habe mir schon den Quelltext / Css-Dati / Script angesehen :

    Quelltext:

    <script type="text/javascript" src="http://www.ludk.de/wordpress/wp-content/themes/charred2/scripts/tips.js"></script>


    <div id="introIMG4"><a href="http://www.ludk.de/wordpress/surfmag/" class="Tips2" title="Read More :: Click here to read the rest of this entry."><img src="http://www.ludk.de/p/8.jpg"/></a></div>


    Script:
    window.addEvent('domready', function(){
    /* Tips 1 */
    var Tips1 = new Tips($$('.Tips1'));

    /* Tips 2 */
    var Tips2 = new Tips($$('.Tips2'), {
    initialize:function(){
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
    },
    onShow: function(toolTip) {
    this.fx.start(1);
    },
    onHide: function(toolTip) {
    this.fx.start(0);
    }
    });

    /* Tips 3 */
    var Tips3 = new Tips($$('.Tips3'), {
    showDelay: 400,
    hideDelay: 400,
    fixed: true
    });

    /* Tips 4 */
    var Tips4 = new Tips($$('.Tips4'), {
    className: 'custom'
    });
    });


    CSS:
    #introIMG4 img {
    border:medium none;
    height:356px;
    width:740px;
    }
    #introIMG4 {
    background:transparent url(images/shadflow4.png) no-repeat scroll right bottom;
    float:left;
    height:345px;
    margin:12px 0 -141px -2px;
    padding:1px 7px 18px 8px;
    width:741px;


    Sollte eigentlich das wichtigste gewesen sein. Aber irgendwas überseh ich ? :(
    Ich finde die "class="Tips2"" nicht!


    Herzlichen Dank :rolleyes:
    Makkus

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von da_makkus ()

  • Hi,
    ich weiß echt nicht, was du nun von uns willst. Hab mir dein Thread mehrmals durchgelesen und finde einfach keine Frage, die es zu beantworten gillt. Bitte äußere dich genauer. Was willst du machen? Wo liegt wann dein Problem?

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • ganz am Anfang steht :

    Wie krieg ich das Script auch auf meiner Seite zum laufen ?=

    Ich habe schon die css-dateien kopiert (soweit wie nötig), das Script als auch den <div> in mein html document. Aber bei mir funktioniert der ToolTip nicht, d.h er erscheint nicht.

    Vielleicht kann mir einer sagen was ich alles davon brauche , bzw was mir noch fehlt dass er angezeigt wird!

    Ich hoffe so ist die frage besser verständlich :)

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • Achso.

    Quellcode

    1. <script type="text/javascript" src="http://www.ludk.de/wordpress/wp-content/themes/charred2/scripts/mootools.js"></script>

    gehört auch zu dem tips.js Das einfach auch einfügen und es müssten theoretisch funktionieren.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Funktioniert bei mir leider trotzdem nicht.
    Hab alles richtig "verlinkt/Pfade angegeben".


    Aus der Zeile:

    <div id="introIMG4"><a href="http://www.ludk.de/wordpress/surfmag/" class="Tips2" title="Read More :: Click here to read the rest of this entry."><img src="http://www.ludk.de/p/8.jpg"/></a></div>


    schließe ich dass es eine css datei mit :

    #introIMG4
    geben muss, und eine
    .Tips2
    !

    Jedoch finde ich diese .Tips2 in keiner der verlinkten css-dateien ?
    Vielleicht kann es ja mal einer bei sich probieren (wenn er zu viel zeit hat^^)

    Danke aber schonmal

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • Die CSS-Angaben sind, wie gesagt nur für die formatierung zuständig - haben eher wenig mit JavaScript zu tun. Eine id kommt in der ganzen HTML-Seite nur einmal vor, darum macht sich das gut, um Abschnitte zu kennzeichenen, die mit JavaScript ausgewertet werden können. Auch können Klassen von JavaScript benutzt werden, um eine Reihe spezifischer Elemente zu erfassen. Ergo müssen Klassen und IDs nicht immer etwas mit CSS zu tun haben ;)

    Dein Problem wird wahrscheinlich sein, dass du mootools.js nicht als erstes einbindest. Denn das ist Pflicht, da in tips.js die Funktionen aus mootools gebraucht werden. Bei mir funktioniert es jedenfalls einwandfrei.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Sodala:

    nun krieg ich den ToolTip auch hin :

    CSS:

    HTML-Quellcode

    1. .tool-tip {
    2. Z-INDEX: 10;
    3. WIDTH: 400px; /* Länge des Rechtsecks*/
    4. COLOR: black;
    5. }
    6. .tool-title {
    7. PADDING-RIGHT: 8px;
    8. PADDING-LEFT: 8px;
    9. PADDING-TOP: 8px;
    10. PADDING-BOTTOM:5px;
    12. FONT-WEIGHT: bold;
    13. FONT-SIZE: 15px;
    14. background-repeat:repeat-x;
    15. COLOR:#0099cc;
    17. border-left:2px black solid;
    18. border-top:2px black solid;
    19. border-right:2px black solid;
    21. }
    23. .tool-text {
    24. PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 15px;
    25. PADDING-BOTTOM: 8px; PADDING-TOP: 4px;
    27. border-left:2px black solid; border-bottom:2px black solid;border-right:2px black solid;
    29. }
    Alles anzeigen


    HTML:

    HTML-Quellcode

    1. <script src="mootools.svn.js"
    2. type=text/javascript></script>
    3. <script type="text/javascript">
    4. window.addEvent('domready', function(){
    5. /* Tips 2 */
    6. var Tips2 = new Tips($$('.Tips2'), {
    7. initialize:function(){
    8. this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 100, wait: false}).set(0);
    9. },
    10. onShow: function(toolTip) {
    11. this.fx.start(5);
    12. },
    13. onHide: function(toolTip) {
    14. this.fx.start(0);
    15. }
    16. });
    17. });
    18. </script>
    20. <body>
    21. <img id="crew_photo" src="../Pics/****" class="Tips2" title="bla bla :: bli bli"
    22. alt="Crewphoto">
    23. </body>
    Alles anzeigen



    Mein Letztes Problem:


    Wie kriege ich eine 3.Zeile ?


    tool-title gibt mir die erste zeile, tool-text die zweite.
    title=" *** :: ***", mit zwei Doppelpunkten trenne ich die Absätze im Title . Wenn ich aber noch 2 Doppelpunkte anhänge ensteht leider keine dritte Zeile.

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • ne funktioniert nicht, er stellt keine 3.Zeile dar ...


    nja egal
    -can b closed-

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)