OT: JavaScript quickie

M

mrcakey

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 = '';
}

}
 
C

cwdjrxyz

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 = '';
}

}
Click to expand...


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.
 
A

Adrienne Boswell

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
Click to expand...

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");}
 
J

jim

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

twaters

Joined
Jan 24, 2008
Messages
1
Reaction score
0
mrcakey said:
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).
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Remove class on hover 1
Closing an overlay outside the overlay as well 1
I need help fixing my website 2
I am trying to detect Which image id="" was clicked ? 22
Help with code 0
Help with popup display 1
Gallery - mosiac/grid layout with filtering and information page popup 1

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 306

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top