Hinweis anzeigen bei Text

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Hinweis anzeigen bei Text

    ich habe einen kleinen Text, und möchte wenn der User mit der Maus drüber geht,
    eine ausführlichere Beschreibung anzeigen lassen.
    So in der Art wie der alt-Text bei Bildern.

    das geht doch bestimmt irgendwie mit Layern und JS, aber wie?

    Danke
    TBT

    Die zwei wichtigsten Regeln für eine berufliche Karriere:
    1. Verrate niemals alles was du weißt!


    PHP 2 AllPatrizier II Browsergame

  • #2
    Re: Hinweis anzeigen bei Text

    warum nicht einfach mit dem title-attribut? damit hast du exakt den selben effekt wie im internet explorer mit dem alt für bilder.

    <span title="erklärung">text</span>
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      passiert nichts, leider
      TBT

      Die zwei wichtigsten Regeln für eine berufliche Karriere:
      1. Verrate niemals alles was du weißt!


      PHP 2 AllPatrizier II Browsergame

      Kommentar


      • #4
        Original geschrieben von TBT
        passiert nichts, leider
        in welchem browser hast du das getestet?

        ich hab gerade nur den ie5.0 zur hand, aber der macht es so wie gewünscht...
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          IE6 mit Crazy Browser 1.0.5 drüber
          TBT

          Die zwei wichtigsten Regeln für eine berufliche Karriere:
          1. Verrate niemals alles was du weißt!


          PHP 2 AllPatrizier II Browsergame

          Kommentar


          • #6
            Das hier packst du alles in eine JS-Datei
            PHP-Code:
            <?php
            <!--
            titel1="Hier der Titel";
            text1="Hier dein Text";

            Xoffset= -10;                    /* Entfernung vom Mauszeiger auf der X Achse */ 
            Yoffset20;                /* Entfernung vom Mauszeiger auf der Y Achse */ 
            var pnew,tool,
            iex=(document.all),popup=-1000;                
            if(
            navigator.appName=="Netscape") {        /* check Browser */ 
                
            (document.layers)?pnew=true:tool=true;
            }

            if (!
            tool) {                /* bei Mousberührung Style aufnehmen */ 
                
            var kh=(pnew)?document.css:css.style;
            if (
            pnew)document.captureEvents(Event.MOUSEMOVE);
                
            document.onmousemove=mouse;
            }
            function 
            zeige(titel,text){            /* Tooltipp Style */ 
                /*var content="<table bgcolor=#426399 width=200 border=1 cellpadding=2 cellspacing=2><td><img src=tooltipplogo.gif border=0><font face='Arial' size=2 color=white><b> Hinweis</b><br>"+tooltipp+"</font></td></table>";
            */
            content "<TABLE WIDTH=400 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\"#c0c0c0\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0><TR><TD><B><FONT face=\"Verdana, Arial, Helvetica\" size=-1 color=\"#cc3300\">"+titel+"</FONT></B></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=5 CELLSPACING=0 BGCOLOR=\"#fef9e2\"><TR><TD><FONT face=\"Verdana, Arial, Helvetica\" COLOR=\"#000000\" size=-2>"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"

            if(tool){
                return;
                }else{
                
            popup=Yoffset;
            if(
            pnew){                /* zeige/verberge Tooltip */ 
                
            kh.document.write(content);
                
            kh.document.close();
                
            kh.visibility="visible"}
            if(
            iex){                        
                
            document.all("css").innerHTML=content;
                
            kh.visibility="visible"
                
            }
                }
            }
            function 
            mouse(e){            /* überwachen der Mouse auf den Achsen*/ 
                
            var x=(pnew)?e.pageX:event.x+document.body.scrollLeft;
                
            kh.left=x+Xoffset;
                var 
            y=(pnew)?e.pageY:event.y+document.body.scrollTop;
                
            kh.top=y+popup;
            }
            function 
            verberge(){            /* Schliessfunktion */ 
            if(!tool){
                
            popup=-1000;
                
            kh.visibility="hidden";
                }
            }
            // -->
            ?>
            der Aufruf erfolgt so:
            <a href="#" onmouseover="zeige(titel1,text1)" onmouseout="verberge()">Dein Text</a>

            Ist nur noch ein Fehler drin, den ich noch beseitigen muß bei Gelegenheit!
            Fehler: wenn du einen Text hast anzeigenlassen (mouseover) geh mal mit deinem zeiger auf die Rechte seite, dann erscheint unten der Scrollbalken.

            gruss

            Kommentar


            • #7
              na der ie6 sollte es erst recht beherrschen...
              hast du denn auch lange genug gewartet, du weist ja, das der alt-text bei bildern auch erst mit ein paar sekunden verzögerung erscheint...
              I don't believe in rebirth. Actually, I never did in my whole lives.

              Kommentar


              • #8
                @Mortalan:

                ich glaub ich raff das nicht.

                habe jetzt deinen Code so eingebunden, und bekomme beim aufruf der Seite ein

                Zeile 14: css ist undefiniert

                wenn ich dann den mouseover auslöse ein

                Zeile 31: document.all(...) ist NULL oder kein Objekt
                Zeile 45: kh ist NULL oder kein Objekt

                PS: ich habe keine Ahnung von JS, bekomme gerade mal ein window.status hin
                TBT

                Die zwei wichtigsten Regeln für eine berufliche Karriere:
                1. Verrate niemals alles was du weißt!


                PHP 2 AllPatrizier II Browsergame

                Kommentar


                • #9
                  sorry, hab was vergessen

                  das hier noch rein (head):
                  <STYLE>
                  .css { position: absolute; visibility: hidden; z-index: 100 }
                  </STYLE>

                  und das in den body:
                  <DIV ID="css" CLASS="css"></DIV>

                  wenns jetzt immer noch nicht geht, sag nochmal bescheid, dann bau ich ein beispielskript

                  gruss

                  Kommentar


                  • #10
                    habs jetzt so
                    Code:
                    <head>
                    	<title>[boardname] - [sitetitle]</title>
                    	<meta http-equiv="content-type" content="[lang.site_code]">
                    	<meta name="robots" CONTENT="index,follow">
                    	<meta name="Author" CONTENT="TBT">
                    	<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)"> 
                    	<meta http-equiv="cache-control" content="no-cache">
                    	<link rel="SHORTCUT ICON" href="favicon.ico">
                    	<link rel="stylesheet" href="[css].css">
                    	<STYLE>
                    		.css { position: absolute; visibility: hidden; z-index: 100 }
                    	</STYLE>
                    	<script language="JavaScript" src="script.js" type="text/javascript"></script>			
                    	<script language="JavaScript" src="script2.js" type="text/javascript"></script>	
                    </head>
                    das script2.js ist der Code von dir.

                    bekomme beim öffnen der Seite immernoch

                    Zeile 14: css ist undefiniert

                    und beim mouseover jetzt

                    Zeile 32: kh ist NULL oder kein Objekt
                    Zeile 45: kh ist NULL oder kein Objekt
                    TBT

                    Die zwei wichtigsten Regeln für eine berufliche Karriere:
                    1. Verrate niemals alles was du weißt!


                    PHP 2 AllPatrizier II Browsergame

                    Kommentar


                    • #11
                      das Skript darf erst nach dem div includet werden, also so:

                      <body>
                      <DIV ID="css" CLASS="css"></DIV>
                      <script language="JavaScript" src="script2.js" type="text/javascript"></script>


                      dann sollte es gehen

                      gruss

                      Kommentar


                      • #12
                        1A - danke so funktionierts, sieht gut aus
                        TBT

                        Die zwei wichtigsten Regeln für eine berufliche Karriere:
                        1. Verrate niemals alles was du weißt!


                        PHP 2 AllPatrizier II Browsergame

                        Kommentar


                        • #13
                          mußt du halt nur noch farblich anpassen... und sobald ich den Fehler noch weghab, poste ichs nochmal hier rein...

                          Kommentar


                          • #14
                            du ermittelst doch die Mauspostition, also wenn die Maus an den rechten Bildschirmrand kommen die Tablle immer schmaler machen ?

                            Könnte das gehen?
                            TBT

                            Die zwei wichtigsten Regeln für eine berufliche Karriere:
                            1. Verrate niemals alles was du weißt!


                            PHP 2 AllPatrizier II Browsergame

                            Kommentar


                            • #15
                              so, hab zwar keine Ahnung von JS, kann aber Codeschnipsel verwenden

                              bau mal die verberge Function so um, dann kommt der Scrollbalken nicht mehr
                              PHP-Code:
                              function verberge(){                        /* Schliessfunktion */ 
                                  
                              if(!tool){
                                      
                              popup=-1000;
                                      
                              kh.visibility="hidden";
                                      if(
                              pnew){                            /* zeige/verberge Tooltip */ 
                                          
                              kh.document.write("");
                                          
                              kh.document.close();
                                      }
                                      if(
                              iex){                        
                                          
                              document.all("css").innerHTML="";
                                      }
                                  }

                              TBT

                              Die zwei wichtigsten Regeln für eine berufliche Karriere:
                              1. Verrate niemals alles was du weißt!


                              PHP 2 AllPatrizier II Browsergame

                              Kommentar

                              Lädt...
                              X