SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    0 Post(s)
    0 Thread(s)

    swap background image onchange in form

    Hi Folks,

    I'm trying to figure out how to make this "game" work. Take a look at this mockup, and then read how I want it to work:

    How it should work:

    The upper table has 24 images arranged in a grid that reads 1 through 24 (left to right, top to bottom).

    In the lower table with the popup lists, I want people to arrange 3 images from the 24 images above. Though they have images in them in the mock-up, the backgrounds would initially be blank. When someone chooses a number from the popup list, the corresponding image becomes the background image of the table cell and the popup list stays selected on the number that corresponds to that image.

    The submit button is there to go to a page that shows the viewer a larger version of the arrangement without the popup lists mussing up the view. I don't really need help with this part I think.

    Can anybody help me out with making the changing the background image part work?


  2. #2
    SitePoint Member jtreefrog's Avatar
    Join Date
    Nov 2003
    Roseville, Mi
    0 Post(s)
    0 Thread(s)
    I *think* I know what you're trying to do...but your layout needs to change a bit. You won't have much luck using JavaScript to dynamically swap out background images in table cells. That's one of those properties that doesn't often play nice between different browsers.

    Try re-coding the 'game' portion with the dropdowns using CSS instead of a table. Then use JavaScript to alter the backgroundImage property of each element (ensure they are block-level elements or have their 'display' property set to 'block).

    Once you're using CSS vs. a table, that will be a good starting point to start manipulating the document (easier, too)

    Give a man a match, and he'll be warm for a minute, but set him on fire, and he'll be warm for the rest of his life.


Posting Permissions

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