OT: JavaScript quickie

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[i];
if ( i == x )
elem.ClassName = 'current';
else
elem.ClassName = '';
}

}

Re: OT: JavaScript quickie

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[i];
> 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.

Re: OT: JavaScript quickie

Gazing into my crystal ball I observed "mrcakey"
writing in news:fn2ktt$c86$1@aioe.org:

> 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:


In your navigation:

Re: OT: JavaScript quickie

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:
=======================================

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">






onMouseover="this.className='gray1' "
onMouseout ="this.className='gray2' " alt="" />