[Javascript] Images for Tabs

[paul at juniperwebcraft.com (Paul Novitski)]

At 1/22/2007 06:23 PM, coldfusion.developer@xxxxxxx wrote:
>I have this row of images.  The functionality I have working is that
>each tabbed image is grayed out and changes to a colorized version of
>the same tab after you click on the tab.  What I can't figure out is
>how to get the first image to show
>the colorized version by default when the page loads and the turn off
>as the user clicks on the other tabs.


I would put the color versions of the images into the markup, then 
use JavaScript to change the img src to the gray on click.

1) On page load, loop through the images and assign the onclick 
behavior to each one, pointing to the turnGray() function.

2) turnGray() modifes the current image's src attribute, changing the 
image name from the color version to the gray version.

This simple model will let you dispense with a lot of the scripting 
and markup you're currently using.


Any process that depends on JavaScript will not work when scripting 
is disabled, so you might consider whether your page is usable with 
scripting turned off, and if not provide an alternative that 
works.  For example, each image in question could be wrapped in an 
anchor which reloads the current page with that image src changed 
from color to gray.  The start-up loop that assigns onclick behavior 
can apply it to those anchors, replacing the call to the server with 
the immediate JavaScript action.

What's the purpose of graying the images?  If it's information that 
needs to be remembered the next time the user returns to the page, 
you might consider a server-side scripting solution for persistence, 
or wrapping each image in an anchor which, once visited, changes its 
child image to the gray version.  (That latter is a CSS solution not 
requiring JavaScript.)

Regards,

Paul
__________________________

Juniper Webcraft Ltd.
http://juniperwebcraft.com