[Javascript] Images for Tabs
Paul Novitski
paul at juniperwebcraft.com
Fri Jan 26 19:51:48 CST 2007
At 1/22/2007 06:23 PM, coldfusion.developer at att.net 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
More information about the Javascript
mailing list