examples of rollovers with visible/invisible text?

[idiotprogrammer]

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]

in comp.infosystems.www.authoring.stylesheets, idiotprogrammer wrote:

Hi, there,

I'm trying to do something, and part of the problem is that I don't
know how to describe the effect.
Indicator that you are doing something overly complicated.
One block will have a list of links stacked over one another and
separated by p tags.
Incorrect HTML, but bit less incorrect than your current.
When the user hovers over any link inside this block, a description of
a link will appear slightly to the right of the link
use :hover and absolute positioning.
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/ ),
Use absolute position in relatively positioned container.
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?

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.

[Els]

idiotprogrammer wrote:

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?

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:absolute, 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:relative instead of absolute
for the popups.

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

[me]

"idiotprogrammer" <id*************@yahoo.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...

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

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>

[Chris Morris]

"me" <anonymous@_.com> writes:

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

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

--
Chris

[me]

"Chris Morris" <c.********@durham.ac.uk> wrote in message
news:87************@dinopsis.dur.ac.uk...

"me" <anonymous@_.com> writes:

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

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

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>

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Lauri Raittila wrote:

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

Incorrect HTML, but bit less incorrect than your current.

It also shouldn't work:

<ul><li><a>Foo</a></ul>
<p>
<ul><li><a>Bar</a></ul>

Should be rendered:
* Foo
* Bar

Not

* Foo

* Bar

As empty should be ignored
http://www.w3.org/TR/REC-html40/stru...t.html#h-9.3.1

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

[idiotprogrammer]

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).

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

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, idiotprogrammer wrote:

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).

I found the brucies thingy archived:
http://porjes.com/brucie-tooltip-thingy.html

Is that what you were after?

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

[idiotprogrammer]

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

[idiotprogrammer]

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
http://www.w3.org/TR/xhtml2/introduc...ro_differences

Not that it makes sense :)

Robert Nagle, idiotprogrammer