OT: JavaScript quickie

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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 /

            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';
                    elem.ClassName = '';


Re: OT: JavaScript quickie

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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>";
    echo "<a href=\"".$link."\">".$page."</a>";


Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

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

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">
<title> image desaturate: msie only, or,  opacity reduction: firefox
<style type="text/css">
.gray2 { }
<body >
<img src="http://groups.google.com/groups/img/3nb /
onMouseover="this.className='gray1' "
onMouseout ="this.className='gray2' " alt="" />

Site Timeline