Stefan Saviano: Maus-Link-Text

Hallo & Danke i.V. ;o),

die meisten Links haben so ein Extra, dass, wenn man die Maus über ihnen "lokalisiert", dann ein Text erscheint. Auf den SelfHTML -Seiten nicht, aber Sie kennen das bestimmt...

Frage: Meistens ist es ja die gleiche Info, so wie schon der Link 'an sich' heißt. Kann man nicht auch was anderes da erscheinen lassen, ein paar Stichworte, die, gerade bei großen Linksammlungen die ja folgenreiche (Ladezeiten) Entscheidung etwas erleichtert?

Habe mir nur Grundkenntnisse in HTML irgendwann mal angeeignet, würde aber gerne z.B. für Wikipedia sowas vorschlagen und durchführen

MFGrüße

  1. Hallo Stefan.

    die meisten Links haben so ein Extra, dass, wenn man die Maus über ihnen "lokalisiert", dann ein Text erscheint. Auf den SelfHTML -Seiten nicht, aber Sie kennen das bestimmt...

    Meinst du das http://de.selfhtml.org/html/referenz/attribute.htm#universalattribute@title=title-Attribut?
    Oder eher so etwas wie die Infobox?

    Habe mir nur Grundkenntnisse in HTML irgendwann mal angeeignet, würde aber gerne z.B. für Wikipedia sowas vorschlagen und durchführen

    Hm?

    Einen schönen Mittwoch noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Meinst du das http://de.selfhtml.org/html/referenz/attribute.htm#universalattribute@title=title-Attribut?
      Oder eher so etwas wie die Infobox?

      Diese Infobox funktioniert leider nicht für inline-Worte und ist immer rechts oben. Kann man unter Einschluss des IE6 so machen, dass die Box wenigstens in der Zeile bleibt.

      Stefan, wenn du näheres willst, melde dich.

      Michael

      1. hi,

        Diese Infobox funktioniert leider nicht für inline-Worte und ist immer rechts oben.

        Warum sollte das nicht funktionieren?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Warum sollte das nicht funktionieren?

          Nun, wenn der zu erläuternde Text _nicht_ als Block dargstellt werden soll, sondern einfach imm Text, dann sieht das doch so aus:
          -----------------------
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
          <html lang="de">
          <head>
          <title>Infobox</title>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
          <style type="text/css">
          <!--
          a.info span {display:none;}
          a.info:hover span {
          position:absolute; top:10px; right:10px; z-index:3;
          display:block;
          width:300px;
          color:black;
          background:#ffffff;
          font:normal 16px courier, sans-serif;
          border:1px solid black;
          padding:10px;}
          -->
          </style>
          </head>
          <body>
          <p>
          Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
          Text davor. <a href="#" class="info">INFOBOX<span>Lorem ipsum dolor sit amet.</span></a>Text danach. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
          </p>
          </body>
          </html>
          ------------------------
          Probier das mit Gecko, OK, aber immer rechts oben, und im IE6 - da geht das nicht.

          1. hi,

            Probier das mit Gecko, OK, aber immer rechts oben,

            Natürlich, weil du keinen Bezug der absoluten Position zum Vorfahrenelement, dem Link, hergestellt hast.
            a.info { position:relative; }

            und im IE6 - da geht das nicht.

            Doch, geht auch - man muss nur den Trick kennen.
            Damit der IE die Veränderung der Sichtbarkeit des Kindelementes auch rendert, muss man am Vorfahrenelement, auf dem :hover eintritt (dem Link) in diesem Zusstand ebenfalls eine Veränderung durchführen - es reicht bspw. schon aus, die Hintergrundfarbe von der Lang-Schreibweise #ffffff auf die kurze #fff zu ändern.

            Leicht problematisch wird es allerdings dann, wenn der Link im Fließtext an einem der Seitenränder zu liegen kommt - je nach Positionierung kann der Span dann u.U. teilweise außerhalb des sichtbaren Bereichs positioniert werden.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
    2. WOW! Genial!

      Vielen Dank Ashura.

      Infobox. Das isses. Mal sehen was daraus wird ...

      :o|
      S