SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing CSS States with JavaScript

    I have a border around some images. Basically what I need it to do is change colors when you click on one, and deselect the old one.

    I don't really know where to start.

    This is the page I'm working on.
    http://alanhettinger.com/wow_example...ound_photo.htm

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update - I got as far as figuring out how to chagne the style when you click it, (you can see it working on the first row) but I still don't know how to deselect the old one.

    Basically, I want this to work pretty much like radiobuttons.
    Last edited by GlennRiverside; Jul 29, 2006 at 16:14.

  3. #3
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your onclick event will have to change all other elements to their original className before changing the new one to the activated className

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I noticed that you are using images to create the colors, instead of CSS.

    Isn't it possible to create these div's using Javascript, and cycle through a bunch of colors in the background? It would take a lot more work to set up, but I bet it would load faster.

    I'm actually going to be working on a similar problem so we'll see how I do. I found a Java applet that allows you to do this, but it doesn't interface well with a website (so it's useless except for CSS development).

    Dave

  5. #5
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a website that does something like that...moves an images when a link is rolled over:

    www.hexoncorp.com

    The image in the hexagon is moved:

    http://www.hexoncorp.com/images/hexagon.gif


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •