onmouseover Text anzeigen (ähnlich wie bei Bildern mit "alt"

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

  • onmouseover Text anzeigen (ähnlich wie bei Bildern mit "alt"

    Hallo,
    ich möchte, dass wenn man mit der Maus auf einen Bereich gleitet, ein Text angezeigt wird. Ähnlich wie bei Bildern mit der "alt" - Anweisung. Leider habe ich im Netzt noch nichts brauchbare gefunden.

    Kann mir da jemand einen Tipp oder Hinweis geben?

  • #2
    ich möchte, dass wenn man mit der Maus auf einen Bereich gleitet, ein Text angezeigt wird.
    title=""

    ich möchte, dass wenn man mit der Maus auf einen Bereich gleitet, ein Text angezeigt wird. Ähnlich wie bei Bildern mit der "alt" - Anweisung.
    Bei richtiger HTML-Interpretation werden Alternativtexte gar nicht (mehr) beim MouseOver angezeigt, sondern nur an Stelle des Bildes beim nicht vorhanden sein des selbigen.

    Kommentar


    • #3
      Ich denke dass du sog. "Tooltips" meinst, und das alt-attribut ist eig das title-attribut. Google mal nach jQuery und Tooltip.
      http://www.flickr.com/photos/netsnake

      CSS is like a Rubik’s cube. Sometimes you’ll line one part up, but that completely screws up something else you had lined up. - Bobby Phillipps

      Kommentar


      • #4
        Man kann das schon mit nem title-Tag machen, jedoch hat das einige Nachteile, wie z.B. dass der Tooltip nur relativ kurz gezeigt wird und man lange Texte eventuell nicht komplett lesen kann in der zeit.

        Man kann dafür auch eine Javascript Funktion nutzen, die divs von display:none auf display:block setzt, beim Mouseover.

        Code:
        function showtip( obj ) {
          if( obj == null ) { return false; }
          
          tooltip = document.getElementById("tooltip-" + obj.id);
          tooltip.style.display = "block";
        }
        
        function hidetip(obj){
          if( obj == null ) { return false; }
          
          tooltip = document.getElementById("tooltip-" + obj.id );
          tooltip.style.display = "none";
        }
        Du hast dann z.B.

        HTML-Code:
        <img src="bild.jpg" alt="Ein Bild" onmouseover="showtip(this)" onmouseout="hidetip(this)" id="bild-1" />
        wichtig hier außer den Events ist id="bild-1", weil das im Javascript dazu verwendet wird den zugehörigen Tooltip zu finden.
        Wenn du jetzt zu bild-1 einen Tooltip erstellen möchtest benutzt du

        HTML-Code:
        <div id="tooltip-bild-1" style="display: none;">Ich bin der Tooltip zu Bild-1</div>
        Lediglich um die Positionierung und Formatierung des Divs müsstest du dir nochmal Gedanken machen.
        Zuletzt geändert von bbrueck; 25.05.2009, 14:01.

        Freizeit-Ratgeber.de
        - Mein aktuelles Projekt rund um Freizeitparks

        Kommentar


        • #5
          Edit: Sorry war im falschen thema. kann gelöscht werden

          Kommentar

          Lädt...
          X