OT: JavaScript quickie

Discussion in 'HTML' started by mrcakey, Jan 21, 2008.

  1. mrcakey

    mrcakey Guest

    Is it even possible to do this the way I'm trying to? I've got a menu where
    the background images change from desaturated to coloured on hover and when
    selected (all through CSS).

    As a "nice to have", I'd like to make it so that when the user is hovering
    over an image, the "selected" image is desaturated, i.e. only image at a
    time is coloured. This is how far I've got, but I'm a bit of a JavaScript
    noob and I'm not even sure what I'm trying to do is possible:

    http://mrcakey.co.uk/jones2/

    +mrcakey
    function menufun(x)
    {
    var fun = new Array();
    var i = 0;
    fun[0] = document.getElementById('home');
    fun[1] = document.getElementById('gallery');
    fun[2] = document.getElementById('treatments');
    fun[3] = document.getElementById('testimonials');
    fun[4] = document.getElementById('fees');
    fun[5] = document.getElementById('contact');

    for (i in fun)
    {
    var elem = fun;
    if ( i == x )
    elem.ClassName = 'current';
    else
    elem.ClassName = '';
    }

    }
    mrcakey, Jan 21, 2008
    #1
    1. Advertising

  2. mrcakey

    cwdjrxyz Guest

    On Jan 21, 11:31 am, "mrcakey" <> wrote:
    > Is it even possible to do this the way I'm trying to? I've got a menu where
    > the background images change from desaturated to coloured on hover and when
    > selected (all through CSS).
    >
    > As a "nice to have", I'd like to make it so that when the user is hovering
    > over an image, the "selected" image is desaturated, i.e. only image at a
    > time is coloured. This is how far I've got, but I'm a bit of a JavaScript
    > noob and I'm not even sure what I'm trying to do is possible:
    >
    > http://mrcakey.co.uk/jones2/
    >
    > +mrcakey
    > function menufun(x)
    > {
    > var fun = new Array();
    > var i = 0;
    > fun[0] = document.getElementById('home');
    > fun[1] = document.getElementById('gallery');
    > fun[2] = document.getElementById('treatments');
    > fun[3] = document.getElementById('testimonials');
    > fun[4] = document.getElementById('fees');
    > fun[5] = document.getElementById('contact');
    >
    > for (i in fun)
    > {
    > var elem = fun;
    > if ( i == x )
    > elem.ClassName = 'current';
    > else
    > elem.ClassName = '';
    > }
    >
    > }


    If you do not get an answer here to your liking, you might try the
    Usenet group comp.language.javascript. From the code you give, I am
    not for sure what you are doing. A very direct way to do this sort of
    thing would be to place both the normal image and a desaturated
    version of the same image(made with some image processing tool) in the
    same location using absolute positioning. Then script might be used to
    switch from one image to the other on hovering over the image, using
    visibility. I have never done this, but it seems likely that such a
    script could be made to work. I do not have time at the moment to
    experiment with this approach.
    cwdjrxyz, Jan 21, 2008
    #2
    1. Advertising

  3. Gazing into my crystal ball I observed "mrcakey" <>
    writing in news:fn2ktt$c86$:

    > Is it even possible to do this the way I'm trying to? I've got a menu
    > where the background images change from desaturated to coloured on
    > hover and when selected (all through CSS).
    >
    > As a "nice to have", I'd like to make it so that when the user is
    > hovering over an image, the "selected" image is desaturated, i.e. only
    > image at a time is coloured. This is how far I've got, but I'm a bit
    > of a JavaScript noob and I'm not even sure what I'm trying to do is
    > possible


    I don't think you need javascript for this. You can do it server side
    with CSS. You need a few things, but they are simple.

    At the top of the each page, before anything else:
    <?php $thispage = "index.php"; //or whatever the URI actually is?>

    In your navigation:
    <li><?php nav("index.php","Home",$thispage)?></li>

    The function:
    //for navigation
    function nav($link,$page,$thisurl)
    {

    if($thisurl == $link)
    {
    echo "<a href=\"".$link."\" class=\"thispage\">".$page."</a>";
    }
    else
    {
    echo "<a href=\"".$link."\">".$page."</a>";
    }
    }

    CSS:
    a.thispage {background-image:url("desaturated.png");}



    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jan 21, 2008
    #3
  4. mrcakey

    jim Guest

    MSIE has a filter you can apply, but it's for MSIE browsers only;
    Firefox has a css opacity setting, but that's for opacity, not
    desaturation.

    However, perhaps a middle ground of both may help? Try this code
    which will
    desaturate the image onMouseover in MSIE, and it will reduce opacity
    if you
    pop the page up in Firefox:
    =======================================
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title> image desaturate: msie only, or, opacity reduction: firefox
    only
    </title>
    <style type="text/css">
    ..gray1 {Filter:Gray;-moz-opacity:.25;opacity:.25;}
    ..gray2 { }
    </style>
    </head>
    <body >
    <img src="http://groups.google.com/groups/img/3nb/
    groups_medium.gif"
    onMouseover="this.className='gray1' "
    onMouseout ="this.className='gray2' " alt="" />
    </body>
    </html>
    jim, Jan 21, 2008
    #4
  5. mrcakey

    twaters

    Joined:
    Jan 24, 2008
    Messages:
    1
    First things first, anything is possible... From looking at the site, they way you've done it is with different images associated with the different class names.... in changing the className dynamically, you'd like the new image to show. Something like,

    Code:
    <html>
    <style type="text/css">
    img.test0 { background:url(test0.gif); }
    img.test1 { background:url(test1.gif); }
    </style>
    <body>
    <img id="test" class="test0">
    <input type="button" onClick="document.getElementById('test').className='test1'" value="change to test1.gif" />
    </body>
    </html>
    
    Unfortunately, every time you change the className like that, the browser will go back to the server and request the new GIF file [the same thing goes for dynamically changing the SRC of an image]... If you're looking to do seamless transitions where some poor sap with a 28.8 baud can see your nice roll-overs without going back to the server and waiting for 20 mintues to load a new image -- you'll need to think outside the box.

    Check this page out:
    http://www.oreillynet.com/pub/a/javascript/2003/07/01/bonusrecipe.html

    Basically there's an image map, right? Well each image map has an "Area" element which includes, amung other things, a coords attribute with 4 coordinates specifying a rectangle. Well, the javascript here basically attaches a function event to each of the image map's AREAs... this function will take the "coords" and basically make a little hole in the image via the CSS attribute "clip" the size of the AREA, and that let's you see through to the image underneath (in your case the un-saturated one) --- the end effect is the ability to seamlessly change an image when mouseing over............. a bit of a hack, but i've found it works the best. The downside is that the CSS CLIP attribute doesn't support the other SHAPE, POLY. So RECTangles only.
    twaters, Jan 24, 2008
    #5
    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. Craig G

    Javascript Quickie

    Craig G, Jan 25, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    394
    Craig G
    Jan 25, 2005
  2. Roy

    Quickie: Printing out code?

    Roy, Oct 18, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    403
  3. Roy
    Replies:
    1
    Views:
    580
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Jan 26, 2006
  4. Gene Ellis
    Replies:
    0
    Views:
    498
    Gene Ellis
    Aug 25, 2004
  5. bartek
    Replies:
    3
    Views:
    646
    Victor Bazarov
    Mar 7, 2004
Loading...

Share This Page