ok experts.....explain how this works

http://www.phoenity.com/newtedge/image_gallery/

Referring to the images at the top of the page, how does he achieve a mouse
over with no onmouseover command?

The only way I can see it being done is through the CSS.
But I'm not clear on how it works exactly.

Richard

Richard wrote:

> http://www.phoenity.com/newtedge/image_gallery/
>
> Referring to the images at the top of the page, how does he achieve a mouse
> over with no onmouseover command?
>
> The only way I can see it being done is through the CSS.
> But I'm not clear on how it works exactly.
>
>
>

CSS, hover.
Mick

Richard wrote:

> http://www.phoenity.com/newtedge/image_gallery/
>
> Referring to the images at the top of the page, how does he achieve a
> mouse over with no onmouseover command?
>
> The only way I can see it being done is through the CSS.
> But I'm not clear on how it works exactly.

Yes, it's CSS.
Some things that are set to display:none become display:block when hovered.
For a more complete tutorial, try:
http://www.meyerweb.com/eric/css/edge/popups/demo.html

"Richard" <Anonymous@127.001> wrote in message
news:...
> http://www.phoenity.com/newtedge/image_gallery/
>
> Referring to the images at the top of the page, how does he achieve a
> mouse
> over with no onmouseover command?
>
> The only way I can see it being done is through the CSS.
> But I'm not clear on how it works exactly.

It isn't JavaScript (so it's off-topic for this newsgroup), but it isn't
rocket science to figure out how it works either:

1) View the source on the page, note that style is in style.css. Type
<url: http://www.phoenity.com/newtedge/ima...lery/style.css /> into
your address bar, hit enter
2) Note that style.css does two @imports. Figure image_gallery.css is
the one you want.
3) Type <url:
http://www.phoenity.com/newtedge/ima...ge_gallery.css /> into
your address bar, hit enter.
4) Read.

ul#gallery>li ul ...
ul#gallery>li:hover ...
ul#gallery>li:hover ul ...

Those take care of the "popup".

ul#gallery ul:before ...
ul#gallery ul:after ...

Those take care of the stuff above and below the horizontal rules in the
"popups".

--
Grant Wagner <>
comp.lang.javascript FAQ - http://jibbering.com/faq

Richard wrote:
> http://www.phoenity.com/newtedge/image_gallery/
>
> Referring to the images at the top of the page, how does he achieve a
> mouse over with no onmouseover command?
>
> The only way I can see it being done is through the CSS.
> But I'm not clear on how it works exactly.

Okay, obviously I'm missing something here.....What exactly is it that the
linked page is supposed to be doing?.....I get a page with a load of
identical icons of Newts down the left, and text beside them to the
right.....There are no mouse-over effects, and no action takes place when I
hover over them.....

Fat Sam wrote:
> Richard wrote:
>> http://www.phoenity.com/newtedge/image_gallery/
>>
>> Referring to the images at the top of the page, how does he achieve a
>> mouse over with no onmouseover command?
>>
>> The only way I can see it being done is through the CSS.
>> But I'm not clear on how it works exactly.
>
> Okay, obviously I'm missing something here.....What exactly is it
> that the linked page is supposed to be doing?.....I get a page with a
> load of identical icons of Newts down the left, and text beside them
> to the right.....There are no mouse-over effects, and no action takes
> place when I hover over them.....

I've just opened it in Firefox, and I now see what it's supposed to do.....

Apparently it doesn't work in IE6......

That's clever......Design an application that doesn't work properly in the
most commonly used browser.....

Fat Sam wrote:
> Apparently it doesn't work in IE6......
>
> That's clever......Design an application that doesn't work properly in the
> most commonly used browser.....

Many authors like to explore the possibilities of CSS, even if it won't
work in IE. It's geek fun.

Experiences like yours might motivate some people to show public support
for Firefox and try to lessen IE's stranglehold.
--
Michael Wilcox

On Tue, 18 Jan 2005 20:47:28 -0000 Fat Sam wrote:

> Richard wrote:
>> http://www.phoenity.com/newtedge/image_gallery/

>> Referring to the images at the top of the page, how does he achieve a
>> mouse over with no onmouseover command?

>> The only way I can see it being done is through the CSS.
>> But I'm not clear on how it works exactly.

> Okay, obviously I'm missing something here.....What exactly is it that
> the
> linked page is supposed to be doing?.....I get a page with a load of
> identical icons of Newts down the left, and text beside them to the
> right.....There are no mouse-over effects, and no action takes place
> when I
> hover over them.....

That's one of the reasons why I dumped IE in favor of firefox.

On Tue, 18 Jan 2005 20:38:29 GMT Grant Wagner wrote:

> "Richard" <Anonymous@127.001> wrote in message
> news:...
>> http://www.phoenity.com/newtedge/image_gallery/

>> Referring to the images at the top of the page, how does he achieve a
>> mouse
>> over with no onmouseover command?

>> The only way I can see it being done is through the CSS.
>> But I'm not clear on how it works exactly.

> It isn't JavaScript (so it's off-topic for this newsgroup), but it
> isn't
> rocket science to figure out how it works either:

> 1) View the source on the page, note that style is in style.css. Type
<url:: http://www.phoenity.com/newtedge/ima...lery/style.css /> into
> your address bar, hit enter
> 2) Note that style.css does two @imports. Figure image_gallery.css is
> the one you want.
> 3) Type <url:
> http://www.phoenity.com/newtedge/ima...ge_gallery.css />
> into
> your address bar, hit enter.
> 4) Read.

> ul#gallery>li ul ...
> ul#gallery>li:hover ...
> ul#gallery>li:hover ul ...

> Those take care of the "popup".

> ul#gallery ul:before ...
> ul#gallery ul:after ...

> Those take care of the stuff above and below the horizontal rules in
> the
> "popups".

Thanks grant.
Whilst searching about, I came across another menu which has some of the
same stuff built into it but not the "popups", and more closely to my needs.
I figured it had to with the hover action since I saw no mouse routines.
I just couldn't see how he manipulated the <li> stuff into the hover
section.

Michael Wilcox wrote:
> Fat Sam wrote:
>
>> Apparently it doesn't work in IE6......
>>
>> That's clever......Design an application that doesn't work properly in
>> the
>> most commonly used browser.....
>
>
> Many authors like to explore the possibilities of CSS, even if it won't
> work in IE. It's geek fun.
>
> Experiences like yours might motivate some people to show public support
> for Firefox and try to lessen IE's stranglehold.

And pigs could fly out brucie's butt....

--
-=tn=-