Trying to do a show/hide upon mousehover with display:none;

[pkr]

Hi,

I'm currently trying to post a row of thumbnail images and upon
hovering each one, the text description below them changes
accordingly. So far I have somewhat gotten what I wanted, as can be
seen @ www.lolattack.com/test.html but for some reason, there is
something wrong with the code as you can see. The effect seems to push
the image/descriptions below (except for the last one). Not quite sure
what is going on here...

Any help at all would be definitely appreciated! Thanks.

[Jamie C.]

You have a really cool idea going there. I wish I had some more time to look at it today, but it's a crazy Monday.

You might be able to find something in a tutorial I came across a couple of months ago on cssglobe.com

Here is the article:
http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links

Here is the demo of the "Pure Css Image Gallery"
http://cssglobe.com/articles/link_tech/02.html

Good luck~!
Jamie

[Paulo Diovani]

You have just a fragment of an html document there. So, test is
dificult and validations is impossible.
First of all, fix your document and validade it (also, validates de
CSS), otherwise you can't expect browsers to render it correctly.

So, change your <span> elements style to something like this (and fix
it's background color):

#recommended a:hover span {
display:block;
position:absolute;
}

Use absolute positioned elements inside relative inside elements is
the only way (that I know) to create css tooltips with hover events.
Also, you'll have to deal with some MSIE6 issues to make this work on
it too (I have a post on my blog, blog.diovani.com, teaching hot to
make this, including how to fix ie6 issues. It is in portuguese, but
if you follow the references, you may find an english howto).

--
Paulo Diovani
pa...@diovani.com
+55 51 8146 5413
___________________
http://www.diovani.com

[mou]

You have a hidden <span> between each image, rather than after all the
images. Inside each <span> is a <div> block element.

So when you hover over, the <span> appears between the images. The
<div> forces it onto a new line, and so everything after it drops below.

My suggestions would be to put all the images in a row, then all the
hidden spans in a row after. Then when you hover over the image, the
text will appear below all the images, rather than just the ones before it.

Does that make sense?

[Paulo Diovani]

> My suggestions would be to put all the images in a row, then all the
> hidden spans in a row after. Then when you hover over the image, the
> text will appear below all the images, rather than just the ones before it.
>
> Does that make sense?

No it, doesn't.
If he place the images on a row and the hidden <span> elements on
another, he can't show then with a:hover (they need to be nested to
the <a>s).
What you suggested would only work with a scripting language (Javascript, ...).

[mou]

Ah-ha, yeah I missed the fact it relied on the <a>'s. Although the
suggestion would work - it just wouldn't work in IE6.

Did the original poster state he wasn't able to use JavaScript at all?
If not, then perhaps a minimalist JS approach - something like the
superfish or suckerfish script, to essentially fake the :hover pseudo on
elements other than <a> tags.

http://www.htmldog.com/articles/suckerfish/dropdowns/

[Paulo Diovani]

> Did the original poster state he wasn't able to use JavaScript at all?
> If not, then perhaps a minimalist JS approach - something like the
> superfish or suckerfish script, to essentially fake the :hover pseudo on
> elements other than <a> tags.

I agree that the use os Js may easier the job, in addcition, if a Js
Framework get use it should work fine on every browser.
But sometimes it's just better to do the job with just CSS (to keep
the page lighter, to make it compatible with non-js capable browsers,
to make it w3c xompliant, etc).

> Ah-ha, yeah I missed the fact it relied on the <a>'s. Although the
> suggestion would work - it just wouldn't work in IE6.

But i don't think your suggestion would work anyway. As far as i know,
Hover events can be applied only to the hovered or nested elements.

[mou]

"But i don't think your suggestion would work anyway. As far as i know,
Hover events can be applied only to the hovered or nested elements."

lol you're completely right. I'm not sure what I was thinking - I've
been working with JS a bit too much recently.

I agree that a CSS approach is always the first choice, although I don't
think validation is a factor - including a .js file, as far as I know,
will not fail you on any (x)html or css validation.

If the site is launching without a single line of JS in sight, then I
admit that it is a factor. But if not, then using an onmouseover
instead of a :hover isn't really a major issue. And besides, you can
use JS to ensure that a lack of JS isn't an issue - get your
non-javascript enabled browser fallback code in place, then hide it with
a document.getElementById("whatever").style.display = "none"; - so if
JS is off, the code is displayed. I'd rather have my site looking
perfect for 99% of people than looking less than perfect for everyone
because of a few paranoid visitors.

I haven't had a chance to look at that tutorial you mentioned earlier on
your site - sounds interesting, I'll jump on now and take a look ;)

P.S. pkr - any chance of a beta invite to your site? :)

[Paulo Diovani]

> I agree that a CSS approach is always the first choice, although I don't
> think validation is a factor - including a .js file, as far as I know,
> will not fail you on any (x)html or css validation.

Yes, Js will not prevent a document from validade. But this is cause
there is no JavaScript standarts.
Javascript is just a script language that is executed by the clients
browser, and it depends on the browser alone. Some things actually
seens easier and cross-plataform with Javascript due to the work of
some developers by creating libraries that has workarounds to do same
things in diferent ways by each browser (manly, IE).

[pkr]

Hey all,

Thanks for the great responses so far. I've tried Paulo's advice by
adding his bit of code on the #recommended div but to no avail. It
worked somewhat, but it displayed the descriptions as more of a
tooltip rather than directly under the row of thumbnails in the area
that I'd prefer it to be. Also, since IE doesn't render a:hover
correctly, it doesn't work in that aspect.

A website that does this how I'd like is www.abum.com (Semi NWS)

I tried to replicate it by looking at that code, but can't seem to get
it right. Now quite sure what they are doing differently. If anyone
can figure it out from there, I'd really appreciate it. I feel like
I'm so close...

Also, Mou, I'd added you to our mailing list and we will alert you
when we have a beta version up and running. I've got my backend coder
working day and night on it so I'll definitely keep you in touch.

Thanks for the help so far!

[mou]

pkr

The change is controlled by JavaScript - specifically, prototype.js

Take a look in http://www.abum.com/td/js/init.js?1175517889
from what I can tell, the text change seems to be controlled by the
tabSelector function.

[pkr]

If someone can replicate this for me, I'll throw you $15 bucks. Shoot
me an e-mail if interested.

On Sep 29, 1:51 pm, mou <mou.me...@googlemail.com> wrote:
> pkr
>
> The change is controlled by JavaScript - specifically, prototype.js
>
> Take a look in http://www.abum.com/td/js/init.js?1175517889
> from what I can tell, the text change seems to be controlled by the
> tabSelector function.
>
> pkr wrote:
> > Hey all,
>
> > Thanks for the great responses so far. I've tried Paulo's advice by
> > adding his bit of code on the #recommended div but to no avail. It
> > worked somewhat, but it displayed the descriptions as more of a
> > tooltip rather than directly under the row of thumbnails in the area
> > that I'd prefer it to be. Also, since IE doesn't render a:hover
> > correctly, it doesn't work in that aspect.
>

> > A website that does this how I'd like iswww.abum.com(Semi NWS)