473,230 Members | 1,546 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,230 software developers and data experts.

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

Jul 21 '05 #1
10 6969
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.
Jul 21 '05 #2
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Twarres - Children
Jul 21 '05 #3
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>
Jul 21 '05 #4
"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
Jul 21 '05 #5
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>
Jul 21 '05 #6
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.
Jul 21 '05 #7
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

Jul 21 '05 #8
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.
Jul 21 '05 #9
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

Jul 21 '05 #10
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

Jul 21 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Kanuf | last post by:
On a page I am designing, I'm trying to create a "div rollover". Basically, I want a div's contents to change (or a new div to replace the old one) via hover. I have tried this, but it doesn't...
3
by: Susan Bricker | last post by:
Greetings. I have three forms that are open at the same time. They are related and cascading. The first form (frmEventAdd) is the anchor. Each event can have many Trials. The second form is...
6
by: Nick Stansbury | last post by:
Hi, I have a loop running on Page_PreRender that sets a number of controls to invisible based on a set of criteria. Before I do this however, I set all of the drop down lists to be visible with...
6
by: Selden McCabe | last post by:
I have a form with a bunch of image buttons. When the user moves the mouse over a button, I want to do two things: 1. change the Imagebutton's picture, and 2. make another control visible. I'm...
16
by: Miguel Dias Moura | last post by:
Hello, i have 5 panels in an ASP.net / VB page. The panel 1 is visible the other 4 are NOT visible. I also have 5 images: image 1, image 2, ..., image5. When i click one of the images,...
1
by: SP | last post by:
Hello there, I have a DataList create as below. <asp:DataList ID="dl_Immunpsuppressive_Main" Runat="server" Width="100%"> <ItemTemplate> <table id="Immunpsuppressive_Main" width="100%"...
1
by: Joshua | last post by:
I'm creating a web control that has an image and a text box. I would like to then override the Visible and Text property of the usercontrol, so when you reference the visible property of the user...
1
rrocket
by: rrocket | last post by:
I am trying to make something invisible on page load lblsomething.visible = false;, but I still need it to post to the browser (at least the source anyway) so that I can make it reappear with a...
1
by: rogerford | last post by:
I have a grid which i bind with values from Database. I have events to edit and update the grid. I am not using SqlDatasource to connect to DB. Rather i am doing the updating of the grid...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.