SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    At Home
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onclick Multiple Image Swap

    I'm looking for a way to make multiple (in my particular case, two) images to change when the user clicks on a third button. What I have is a tabbed interface where I have three tabs that change color when each one is clicked on. That's no problem. What IS the problem is that the tabs are differently-colored and cut diagonally (that's what the client wanted...) forcing me to create two images in-between the tabs.

    See the image below (also attached) to see what I'm talking about:

    http://www.vhtrading.com/tabs.gif

    So what I'm needing to do is when the user clicks on the first tab, both the "in-betweens" have to change, clicks on the second tabs, the "in-betweens" change yet agin, etc...

    I'd really appreciate if anyone could give me help on this. A big thanks in advance.
    Attached Images Attached Images

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It can be done without any javascript, but you will have to rethink your implementation dramatically. One image is all that's needed ... here's a page that shows how to do it with CSS:
    http://superfluousbanter.org/archives/000186.php

  3. #3
    SitePoint Member
    Join Date
    Jul 2004
    Location
    At Home
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, xDev. It's on the right track of what I am looking for, but a couple of problems come up:

    1. I need the tabs to be "activated" by an onclick, not a mouseover.
    2. I need something that will allow for a fluid design, such as table cells containing the tab buttons expanding as the browser window expands.

    Any other ideas?

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go ahead and contruct the raw html in the manner that you wish. I can give a javascript solution if you show me the example code and/or an example page to work with.


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
  •