[JavaScript] tooltipp

Dieses Thema im Forum "Webentwicklung" wurde erstellt von encud, 25. Juli 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 25. Juli 2007
    tooltipp

    hi ich wollte mal fragen wie man so einen tooltipp wie auf dieser seite machen kann(wenn es so heißt bin mir net sicher...)
    hoffe der link klapt: http://www.talesofmagic.de/index.php?c=70
    also wenn man da über so eines der symbole geht mit der maus kommt da so ein fenster und das sowas würde ich gerne auch auf meiner hp machen können... würde mich über ne antwort freuen, gruß encud
     

  2. Anzeige
  3. #2 25. Juli 2007
    AW: tooltipp

    Nimm 'n Div,
    Position Absolute
    und dann on MouseMove zB rufste die Position der Maus ab und gleichst die mit der Position des Div's an. ^^

    So ungefähr.
     
  4. #3 25. Juli 2007
    AW: tooltipp

    [G]overlib[/G]

    tooltip wär:
    HTML:
    <a href="#" style="cursor: help;" onclick="alert('blabla'); return false;">Hilfe</a>
     
  5. #4 25. Juli 2007
    AW: tooltipp

    hier habe ich mein kleines tooltip script das dafür komplet ausreichend iss ^^

    code glei mit nem kleinen Beispiel ;)
    PHP:
    < script >
    <!--
    wmtt  null ;

    document . onmousemove  updateWMTT ;

    function 
    updateWMTT ( e ) {
        
    = ( document . all ) ?  window . event . document . body . scrollLeft  e . pageX ;
        
    = ( document . all ) ?  window . event . document . body . scrollTop   e . pageY ;
        if (
    wmtt  !=  null ) {
            
    wmtt . style . left  = ( 20 ) +  "px" ;
            
    wmtt . style . top      = ( 20 ) +  "px" ;
        }
    }

    function 
    showWMTT ( id ) {
        
    wmtt  document . getElementById ( id );
        
    wmtt . style . display  "block"
    }

    function 
    hideWMTT () {
        
    wmtt . style . display  "none" ;
    }
    //-->
    </ script >

    <
    style type = "text/css" >
    .
    tooltip  {
        
    position absolute ;
        
    display none ;
        
    background - color #FFFFFF;
    }
    <
    style >



    //<!-- das iss der inhalt der im tooltip angezeigt wird -->
    < div  class= "tooltip"  id = "1" >
        
    Dies ist unser erster Tooltip
    </ div >



    //<!-- aufruf des tooltips -->
    < a href = "#"   onMouseOver = "showWMTT('1')"  onMouseOut = "hideWMTT()" >
    Unser Link
    </ a >
    greetz
     
  6. #5 26. Juli 2007
    AW: tooltipp

    ok:p wie kann man das dann sonst nennen?


    hmm das geht iwie net oder hab ich jetzt was falsch verstanden?:( da passiert dann das: http://encud.kilu.de/tooltipp.htm
     
  7. #6 26. Juli 2007
    AW: tooltipp


    So funktionierts bei mir:

    Code:
    <html>
     <head>
     <script type="text/javascript" language="javascript">
    wmtt = null;
    
    document.onmousemove = updateWMTT;
    
    function updateWMTT(e) {
     x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
     y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
     if (wmtt != null) {
     wmtt.style.left = (x + 20) + "px";
     wmtt.style.top = (y + 20) + "px";
     }
    }
    
    function showWMTT(id) {
     wmtt = document.getElementById(id);
     wmtt.style.display = "block"
    }
    
    function hideWMTT() {
     wmtt.style.display = "none";
    }
    </script>
    
    </head>
    <body>
    
    
    <!-- das iss der inhalt der im tooltip angezeigt wird -->
    <div style="border:1px solid #000000;padding:15px;background-color:silver;position:absolute;display:none;" class="tooltip" id="d1">
     Dies ist unser erster Tooltip
    </div>
    
    
    
    <!-- aufruf des tooltips -->
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()">
    Unser Link
    </a>
    </body>
    </html>
    
     
  8. #7 26. Juli 2007
    AW: tooltipp

    jop so bei mir auch:) dickes dankeschön:)
     
  9. #8 26. Juli 2007
    AW: tooltipp

    jaaa das man die head und body tags noch dran baut habe ich für selbstverständlich gehalten ^^ meins war nur das eigentliche Script und n kleines beispiel für ( wie schon geschrieben ;) ) naja iss ja jetzt auch egal :p
     
  10. #9 26. Juli 2007
    AW: tooltipp

    hatte aber eigentlich body und head drangebaut... nur kein html mehr drum naja egal, geht ga jetzt... bis auf eine kleine ausnahme... ich habe das jetzt bei nem bild verwendet... und nun ist es so, das der tooltip dann immer hinter den bildern ist... gibt es da ne möglichkeit das auf vor die bilder zu bekommen?
     
  11. #10 26. Juli 2007
    AW: tooltipp

    Jop. Z-Index vom Div verändern.
    [G]Z-index CSS HTML[/G] da solltest du was finden. :D
     
  12. #11 26. Juli 2007
    AW: tooltipp

    ok das klappt jetzt auch:)
    und jetzt noch, wenn man das jetzt bei mehreren machen möchte muss man das ja so schreiben:
    HTML:
    <div class="tooltip" id="d1">
     tooltip1
    </div>
    
    <div class="tooltip" id="d2">
     tooltpi2
    </div>
    wird aber nach der zeit ziehmich viel text... geht das auch noch anders oder ist das pflicht?
     
  13. #12 26. Juli 2007
    AW: tooltipp

    Geht sicher auch anders, zb mit AJAX, aber mit dem Script das du hast musst du es wohl oder übel so machen. ;)
     
  14. #13 26. Juli 2007
    AW: tooltipp

    ok auch net so schlimm:) und was ich jetzt noch habe ist wenn man jetzt auf ein bild mit der maus hällt und dann mit dem mausrad scrollt, und dann wieder auf ein anderes bild kommt bei dem auch so ein tooltip ist, dann ist das fenster bevor man die maus wieder bewegt oben link.... kann man das auch iwie ändern oder würde das zu viel text werden?
     
  15. #14 26. Juli 2007
    AW: tooltipp

    Ich verstehe nicht warum man nicht einfach mal ordentlich googlet ... hier das z.B. ist eine Schritt für Schritt Anleitung für AJAX - Tooltips...

    selfhtml.de - Tooltips f
     
  16. #15 27. Juli 2007
    AW: tooltipp

    Warum verwendest du nicht die eigens dafür geschriebene Javascript lib?

    Hat alles was du brauchst und is dazu noch Browserunabhängig!

    overlib - Google-Suche
    HTML:
    <a href="#" onmouseover="return overlib('Ich bin ein Text!');" onmouseout="return nd();">Mit der Overlib einen Tooltip erstellen!</a>
    AJAX ist keine Script/Programmiersprache lediglich die Methode per Javascript einen XML-request abzusetzen wird so genannt. AJAX lernen, ymmd, geht nicht^^ du musst Javascript lernen, inkl. die Methoden die AJAX genannt werden. nicht an MakenX gerichtet^^

    Was ist DOM-Scripting? | Webkrauts
    Galileo Computing - openbook - B&uuml;cher online lesen und herunterladen
     
  17. #16 27. Juli 2007
    AW: tooltipp

    gut, dann kenn ich ja jetz deinen reallifenamen, wenn es wirklich DEIN script ist.
    denn genau das, mit demselben text, gibt es auf einer website mit vielen tipps....

    nenn ich jetzt nicht, falls es wirklich deine seite sein sollte ;)
    aber wenn nicht, sollte man nicht andere scripte zu eigen machen


    @MakenX

    warum immer AJAX? jedes mal AJAX^^
    wenn ich mir deinen link so anschaue, sieht das da echt mist aus, ich mein es dauert ne weile bis es weg geht, manchmal gehts nicht weg und er bleibt da stehen wo man ihn das erste mal geladen hat.
    find ich persöhnlich ne schlechtere lösung, anstatt die erste, die genannt wurde.
    man brauch nicht immer AJAX, auch wenn es toll klingt.

    mfg
     
  18. #17 27. Juli 2007
    AW: tooltipp

    hmm ja das andere hab ich jetzt auch garicht probiert weil das was hier gepostet wurde ja funkioniert... ich hatte nur gehofft es vllt noch ein bissel verbessern zu können aber so wie es jetzt ist, ist ja eigentlich auch schon in ordnung...
     
  19. #18 29. Juli 2007
    AW: tooltipp

    alles gesagt = dicht
     

  20. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript tooltipp
  1. Antworten:
    0
    Aufrufe:
    3.618
  2. Antworten:
    6
    Aufrufe:
    2.873
  3. Antworten:
    2
    Aufrufe:
    982
  4. JavaScript Cookie Manager

    leex , 4. September 2015 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.158
  5. Antworten:
    9
    Aufrufe:
    1.306
  • Annonce

  • Annonce