examples of rollovers with visible/invisible text?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • idiotprogrammer

    examples of rollovers with visible/invisible text?

    Hi, there,

    I'm trying to do something, and part of the problem is that I don't
    know how to describe the effect.

    One block will have a list of links stacked over one another and
    separated by p tags.

    When the user hovers over any link inside this block, a description of
    a link will appear slightly to the right of the link (let's say 1 inch
    to the right) of the link itself (perhaps enclosed within a box or
    border). This link description will appear only on rollovers, and each
    description will be made visible a relative arbitrary distance away
    from the original link.

    I've implemented one version of it based on Eric Meyer's visible hover
    text trick (hover the links on the right:
    http://www.idiotprogrammer.com/ ), but the invisible text is appearing
    in a stationary, not a relative place. I did this two years ago, and
    for now I want all the rollover text to appear relative to the position
    of the original link.

    Can anyone refer me to some other good css only examples of link/text
    rollovers with visible/invisible text? And give me a name for what this
    effect is called?

    Robert Nagle
    idiotprogrammer

  • Lauri Raittila

    #2
    Re: examples of rollovers with visible/invisible text?

    in comp.infosystem s.www.authoring.stylesheets, idiotprogrammer wrote:[color=blue]
    > Hi, there,
    >
    > I'm trying to do something, and part of the problem is that I don't
    > know how to describe the effect.[/color]

    Indicator that you are doing something overly complicated.
    [color=blue]
    > One block will have a list of links stacked over one another and
    > separated by p tags.[/color]

    Incorrect HTML, but bit less incorrect than your current.
    [color=blue]
    > When the user hovers over any link inside this block, a description of
    > a link will appear slightly to the right of the link[/color]

    use :hover and absolute positioning.
    [color=blue]
    > I've implemented one version of it based on Eric Meyer's visible hover
    > text trick (hover the links on the right:
    > http://www.idiotprogrammer.com/ ),[/color]

    Use absolute position in relatively positioned container.
    [color=blue]
    > Can anyone refer me to some other good css only examples of link/text
    > rollovers with visible/invisible text? And give me a name for what this
    > effect is called?[/color]

    If you can find brucies hover thingy, it should work. Try googling
    alt.html...

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.

    Comment

    • Els

      #3
      Re: examples of rollovers with visible/invisible text?

      idiotprogrammer wrote:
      [color=blue]
      > Hi, there,
      >
      > I'm trying to do something, and part of the problem is that I don't
      > know how to describe the effect.
      >
      > One block will have a list of links stacked over one another and
      > separated by p tags.
      >
      > When the user hovers over any link inside this block, a description of
      > a link will appear slightly to the right of the link (let's say 1 inch
      > to the right) of the link itself (perhaps enclosed within a box or
      > border). This link description will appear only on rollovers, and each
      > description will be made visible a relative arbitrary distance away
      > from the original link.
      >
      > I've implemented one version of it based on Eric Meyer's visible hover
      > text trick (hover the links on the right:
      > http://www.idiotprogrammer.com/ ), but the invisible text is appearing
      > in a stationary, not a relative place. I did this two years ago, and
      > for now I want all the rollover text to appear relative to the position
      > of the original link.
      >
      > Can anyone refer me to some other good css only examples of link/text
      > rollovers with visible/invisible text? And give me a name for what this
      > effect is called?[/color]

      The name is CSS popups (at least that's what I call 'em), and the
      reason they are in the same place instead of a relative place, is
      probably that you used position:absolu te, wich is relative to the
      positioned parent. Haven't looked at your site, so I could be wrong,
      but try what happens if you use position:relati ve instead of absolute
      for the popups.

      --
      Els http://locusmeus.com/
      Sonhos vem. Sonhos vão. O resto é imperfeito.
      - Renato Russo -
      Now playing: Twarres - Children

      Comment

      • me

        #4
        Re: examples of rollovers with visible/invisible text?

        "idiotprogramme r" <idiotprogramme r@yahoo.com> wrote in message
        news:1111522201 .192949.288870@ l41g2000cwc.goo glegroups.com.. .[color=blue]
        > Hi, there,
        >
        > I'm trying to do something, and part of the problem is that I don't
        > know how to describe the effect.
        >
        > One block will have a list of links stacked over one another and
        > separated by p tags.
        >
        > When the user hovers over any link inside this block, a description of
        > a link will appear slightly to the right of the link (let's say 1 inch
        > to the right) of the link itself (perhaps enclosed within a box or
        > border). This link description will appear only on rollovers, and each
        > description will be made visible a relative arbitrary distance away
        > from the original link.
        >
        > I've implemented one version of it based on Eric Meyer's visible hover
        > text trick (hover the links on the right:
        > http://www.idiotprogrammer.com/ ), but the invisible text is appearing
        > in a stationary, not a relative place. I did this two years ago, and
        > for now I want all the rollover text to appear relative to the position
        > of the original link.
        >
        > Can anyone refer me to some other good css only examples of link/text
        > rollovers with visible/invisible text? And give me a name for what this
        > effect is called?
        >
        > Robert Nagle
        > idiotprogrammer[/color]

        This can easily be accomplished in Dreamweaver by setting the position of
        your layer (aka div) with a percentage value.

        Here's another possibility, not exactly what you asked for but it might give
        you some ideas, see below:
        Good Luck,
        me

        <a href="#" title="Put your pop up message here">Hover your cursor over this
        link to see a popup message</a>


        Comment

        • Chris Morris

          #5
          Re: examples of rollovers with visible/invisible text?

          "me" <anonymous@_.co m> writes:[color=blue]
          > <a href="#" title="Put your pop up message here">Hover your cursor over this
          > link to see a popup message</a>[/color]

          <span title="...">... </span> would be a better way of getting that
          effect than a link that goes nowhere.

          --
          Chris

          Comment

          • me

            #6
            Re: examples of rollovers with visible/invisible text?

            "Chris Morris" <c.i.morris@dur ham.ac.uk> wrote in message
            news:87k6nyjv33 .fsf@dinopsis.d ur.ac.uk...[color=blue]
            > "me" <anonymous@_.co m> writes:[color=green]
            > > <a href="#" title="Put your pop up message here">Hover your cursor over[/color][/color]
            this[color=blue][color=green]
            > > link to see a popup message</a>[/color]
            >
            > <span title="...">... </span> would be a better way of getting that
            > effect than a link that goes nowhere.[/color]

            Mine works without a style but your alternative is interesting. I did need
            to update my example, thanks for the prod. See below:
            Signed,
            me

            <a href="#" title="Put your pop up message here" onClick="return
            false">Hover
            your cursor over this link to see a popup message</a>


            Comment

            • Lauri Raittila

              #7
              Re: examples of rollovers with visible/invisible text?

              in comp.infosystem s.www.authoring.stylesheets, Lauri Raittila wrote:[color=blue][color=green]
              > > One block will have a list of links stacked over one another and
              > > separated by p tags.[/color]
              >
              > Incorrect HTML, but bit less incorrect than your current.[/color]

              It also shouldn't work:

              <ul><li><a>Fo o</a></ul>
              <p>
              <ul><li><a>Ba r</a></ul>

              Should be rendered:
              * Foo
              * Bar

              Not

              * Foo

              * Bar

              As empty should be ignored




              --
              Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
              Utrecht, NL.

              Comment

              • idiotprogrammer

                #8
                Re: examples of rollovers with visible/invisible text?

                Interesting.

                Actually I did some testing and web searching. (And by the way, the
                closest term I found was a "flyout" although it is used more in the
                context of navigational bars).

                (And by, the way, Lauri, you're right; although I put the list within
                <p> tags, it probably is more suitable as an unordered list).

                I found this which approximates the effect to some extent

                (I'm not interested in making navigation bars and I don't need the
                flyouts to have additional links).

                Apparently, to make that above technique work for now, you need to have
                server set mime type for .htc files (which I don't think I'll be able
                to have any control over).

                Eric Meyer's css technique is to use span {display:hidden } and
                a:hover{display :block}, which works well for absolute positioning, but
                not for relative positioning. Actually it works somewhat well in
                Firefox for relative positioning, but not at all for IE. However, since
                this feature is merely an embellishment, I might end up doing that
                anyway.

                Using the span/title tooltip is an interesting and painless idea.

                The original example I found (don't look--it's on a text-only not safe
                for work adult/sex website
                http://www.asstr.org/main.html--look at the list on the left) uses a
                combination of a javascript .onmouseover events and a hidden css class
                which is overridden for a:hover. It's pretty clever. But rather
                complicated (different stylesheets for different browsers). A css only
                solution would please me more.

                "Use absolute position in relatively positioned container." This is an
                intriguing concept. I thought absolute positioning had to do with
                position in the browser page, not from a container. So let's say you
                have a relatively positioned list container with lots of borders and
                margins and use absolute positioning within it. I'll try it out!

                Thanks for the ideas. (BTW, I posted through google groups, with a lag
                time of a day or so). Keep them coming.

                Robert Nagle, idiotprogrammer
                Houston , Texas

                Comment

                • Lauri Raittila

                  #9
                  Re: examples of rollovers with visible/invisible text?

                  in comp.infosystem s.www.authoring.stylesheets, idiotprogrammer wrote:[color=blue]
                  > Interesting.
                  >
                  > Actually I did some testing and web searching. (And by the way, the
                  > closest term I found was a "flyout" although it is used more in the
                  > context of navigational bars).
                  >
                  > (And by, the way, Lauri, you're right; although I put the list within
                  > <p> tags, it probably is more suitable as an unordered list).
                  >
                  > I found this which approximates the effect to some extent
                  > http://www.positioniseverything.net/css-flyout.html
                  > (I'm not interested in making navigation bars and I don't need the
                  > flyouts to have additional links).[/color]

                  I found the brucies thingy archived:


                  Is that what you were after?

                  --
                  Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
                  Utrecht, NL.

                  Comment

                  • idiotprogrammer

                    #10
                    Re: examples of rollovers with visible/invisible text?

                    Actually, yes! (I did try searching, but brucie's site is down)

                    That's a really cool simple effect. Actually though I can't figure what
                    controls the position of the rollover box. (I need it to appear to the
                    right of the list item instead of left). It's staying at an absolute
                    width the whole time.

                    Give me time to play with it. This part should be fun. Thanks.


                    Robert Nagle
                    idiotprogrammer

                    Comment

                    • idiotprogrammer

                      #11
                      Re: examples of rollovers with visible/invisible text?

                      btw, interesting trivia fact (re: the p/li thing you mentioned to )

                      in xhtml 2.0 p tags will be able to contain list items


                      Not that it makes sense :)

                      Robert Nagle, idiotprogrammer

                      Comment

                      Working...