how is this effect done with no javascript?

Discussion in 'HTML' started by richard, Sep 30, 2006.

  1. richard

    richard Guest

    http://www.oswd.org/design/preview/id/2849

    When moving mouse over the 3 small images, another larger one pops up.
    As I did not see any specific JS in the source, am I assuming correctly that
    xhtml can emulate this effect?
    I haven't been able to look at the CSS yet. Just curious.
     
    richard, Sep 30, 2006
    #1
    1. Advertising

  2. richard

    Ben C Guest

    On 2006-09-30, richard <> wrote:
    > http://www.oswd.org/design/preview/id/2849
    >
    > When moving mouse over the 3 small images, another larger one pops up.
    > As I did not see any specific JS in the source, am I assuming correctly that
    > xhtml can emulate this effect?
    > I haven't been able to look at the CSS yet. Just curious.


    You can use the :hover pseudo for this:

    .large
    {
    visibility: hidden;
    }

    .small:hover .large
    {
    visibility: visible;
    }

    that kind of thing.

    I haven't looked at their CSS either :)
     
    Ben C, Sep 30, 2006
    #2
    1. Advertising

  3. richard

    richard Guest

    "Ben C" <> wrote in message
    news:...
    > On 2006-09-30, richard <> wrote:
    >> http://www.oswd.org/design/preview/id/2849
    >>
    >> When moving mouse over the 3 small images, another larger one pops up.
    >> As I did not see any specific JS in the source, am I assuming correctly
    >> that
    >> xhtml can emulate this effect?
    >> I haven't been able to look at the CSS yet. Just curious.

    >
    > You can use the :hover pseudo for this:
    >
    > .large
    > {
    > visibility: hidden;
    > }
    >
    > .small:hover .large
    > {
    > visibility: visible;
    > }
    >
    > that kind of thing.
    >
    > I haven't looked at their CSS either :)


    I did look in the CSS and it is in the hover. Apparently just replacing the
    image with a larger one.
     
    richard, Sep 30, 2006
    #3
  4. richard

    Toby Inkster Guest

    Toby Inkster, Sep 30, 2006
    #4
  5. richard

    Chris Guest

    Ben C wrote:

    > On 2006-09-30, richard <> wrote:
    >> http://www.oswd.org/design/preview/id/2849
    >>
    >> When moving mouse over the 3 small images, another larger one pops up.
    >> As I did not see any specific JS in the source, am I assuming correctly
    >> that xhtml can emulate this effect?
    >> I haven't been able to look at the CSS yet. Just curious.

    >
    > You can use the :hover pseudo for this:
    >
    > .large
    > {
    > visibility: hidden;
    > }
    >
    > .small:hover .large
    > {
    > visibility: visible;
    > }
    >
    > that kind of thing.
    >
    > I haven't looked at their CSS either :)

    This is exactly something I need, but it doesn't work for me, so can I ask
    you to be a bit more specific? I put the "small" class in my img tag, and
    added a width and height for large:

    ..large
    {
    width: 50px;
    height: 50px;
    visibility: hidden;
    }

    ..small: hover .large
    {
    visibility: visible;
    }

    <a href="/" title=""><img src="icon.png" class="small" alt="" /></a>

    So why does it not work? What am I missing?
     
    Chris, Sep 30, 2006
    #5
  6. richard

    Ben C Guest

    On 2006-09-30, Chris <> wrote:
    > Ben C wrote:
    >
    >> On 2006-09-30, richard <> wrote:
    >>> http://www.oswd.org/design/preview/id/2849
    >>>
    >>> When moving mouse over the 3 small images, another larger one pops up.
    >>> As I did not see any specific JS in the source, am I assuming correctly
    >>> that xhtml can emulate this effect?
    >>> I haven't been able to look at the CSS yet. Just curious.

    >>
    >> You can use the :hover pseudo for this:
    >>
    >> .large
    >> {
    >> visibility: hidden;
    >> }
    >>
    >> .small:hover .large
    >> {
    >> visibility: visible;
    >> }
    >>
    >> that kind of thing.
    >>
    >> I haven't looked at their CSS either :)

    > This is exactly something I need, but it doesn't work for me, so can I ask
    > you to be a bit more specific? I put the "small" class in my img tag, and
    > added a width and height for large:
    >
    > .large
    > {
    > width: 50px;
    > height: 50px;
    > visibility: hidden;
    > }
    >
    > .small: hover .large
    > {
    > visibility: visible;
    > }
    >
    ><a href="/" title=""><img src="icon.png" class="small" alt="" /></a>
    >
    > So why does it not work? What am I missing?


    First thing is you need to lose the space between .small: hover (i.e.
    ..small:hover).

    Second point is that this is a descendent selector:

    ..small:hover large
    {
    ...
    }

    selects anything with a class of "large" that's a descendent (i.e.
    nested inside) anything with a class of "small" that's also being
    hovered over.

    In your example, there's nothing with class "large", and the img, which
    has class "small" has no descendents. So nothing matches the selector.

    One way of doing it is this:

    <style type="text/css">
    /* big thing inside an anchor-- basically don't display it */
    a .big
    {
    display: none;
    }

    /* big thing inside a hovered anchor-- do display it */
    a:hover .big
    {
    display: inline;
    }

    /* small thing inside a hovered anchor-- don't display it */
    a:hover .small
    {
    display: none;
    }
    </style>

    ...
    <a href="#">
    <img src="small.png" class="small"></img>
    <img src="big.png" class="big"></img>
    </a>

    Note also the difference between "display: none" and "visibility:
    hidden". display:none means carry on as if the element weren't there at
    all, visibility:hidden means leave a hole in the page for it, but make
    it invisible.
     
    Ben C, Sep 30, 2006
    #6
  7. richard

    dorayme Guest

    In article <5n.co.uk>,
    Toby Inkster <> wrote:

    > richard wrote:
    >
    > > how is this effect done with no javascript?
    > > http://www.oswd.org/design/preview/id/2849

    >
    > The effect is explained on the page itself. Try reading the text.


    Any reason anyone knows why HTML could not be converted for

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">?

    It works fine on Safari, have not looked at IEWin.

    Interesting idea... I like it. I am not sure if the author's use
    of px for font sizes or the XHTML is anything essential to the
    idea.

    --
    dorayme
     
    dorayme, Sep 30, 2006
    #7
  8. richard

    Chris Guest

    Ben C wrote:

    > On 2006-09-30, Chris <> wrote:
    >> Ben C wrote:
    >>
    >>> On 2006-09-30, richard <> wrote:
    >>>> http://www.oswd.org/design/preview/id/2849
    >>>>
    >>>> When moving mouse over the 3 small images, another larger one pops up.
    >>>> As I did not see any specific JS in the source, am I assuming correctly
    >>>> that xhtml can emulate this effect?
    >>>> I haven't been able to look at the CSS yet. Just curious.
    >>>
    >>> You can use the :hover pseudo for this:
    >>>
    >>> .large
    >>> {
    >>> visibility: hidden;
    >>> }
    >>>
    >>> .small:hover .large
    >>> {
    >>> visibility: visible;
    >>> }
    >>>
    >>> that kind of thing.
    >>>
    >>> I haven't looked at their CSS either :)

    >> This is exactly something I need, but it doesn't work for me, so can I
    >> ask you to be a bit more specific? I put the "small" class in my img tag,
    >> and added a width and height for large:
    >>
    >> .large
    >> {
    >> width: 50px;
    >> height: 50px;
    >> visibility: hidden;
    >> }
    >>
    >> .small: hover .large
    >> {
    >> visibility: visible;
    >> }
    >>
    >><a href="/" title=""><img src="icon.png" class="small" alt="" /></a>
    >>
    >> So why does it not work? What am I missing?

    >
    > First thing is you need to lose the space between .small: hover (i.e.
    > .small:hover).
    >
    > Second point is that this is a descendent selector:
    >
    > .small:hover large
    > {
    > ...
    > }
    >
    > selects anything with a class of "large" that's a descendent (i.e.
    > nested inside) anything with a class of "small" that's also being
    > hovered over.
    >
    > In your example, there's nothing with class "large", and the img, which
    > has class "small" has no descendents. So nothing matches the selector.
    >
    > One way of doing it is this:
    >
    > <style type="text/css">
    > /* big thing inside an anchor-- basically don't display it */
    > a .big
    > {
    > display: none;
    > }
    >
    > /* big thing inside a hovered anchor-- do display it */
    > a:hover .big
    > {
    > display: inline;
    > }
    >
    > /* small thing inside a hovered anchor-- don't display it */
    > a:hover .small
    > {
    > display: none;
    > }
    > </style>
    >
    > ...
    > <a href="#">
    > <img src="small.png" class="small"></img>
    > <img src="big.png" class="big"></img>
    > </a>
    >
    > Note also the difference between "display: none" and "visibility:
    > hidden". display:none means carry on as if the element weren't there at
    > all, visibility:hidden means leave a hole in the page for it, but make
    > it invisible.


    Thanks, it makes a lot more sense now.

    Chris
     
    Chris, Oct 2, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Viabug123
    Replies:
    1
    Views:
    4,300
    Neredbojias
    Apr 21, 2006
  2. tshad
    Replies:
    3
    Views:
    1,259
    Patrice
    Mar 4, 2008
  3. autobest.be
    Replies:
    3
    Views:
    173
    William Morris
    Apr 21, 2004
  4. Zhidian Du
    Replies:
    0
    Views:
    168
    Zhidian Du
    Feb 21, 2004
  5. Gordowey

    Cool DIV effect...how can this be done?

    Gordowey, Apr 5, 2006, in forum: Javascript
    Replies:
    4
    Views:
    176
    Randy Webb
    Apr 6, 2006
Loading...

Share This Page