3 Replies Latest reply on Sep 19, 2008 4:41 PM by pixlor

    layered image swaps??

    basecolor
      Does anyone know how to layer image swaps? Like if I had a shoe in the middle of my web page and a colors menu on the right, how would I layer the different sections of the shoe like laces, upper, tread and such to be displayed simultaneously without the image swap onclick behavior clearing the previous selection so that I can see all parts of the shoe together in one cell? Sounds confusing and I've been destroying my brain today trying to figure this out.
        • 1. Re: layered image swaps??
          pixlor Level 4
          quote:

          Originally posted by: basecolor
          Does anyone know how to layer image swaps? Like if I had a shoe in the middle of my web page and a colors menu on the right, how would I layer the different sections of the shoe like laces, upper, tread and such to be displayed simultaneously without the image swap onclick behavior clearing the previous selection so that I can see all parts of the shoe together in one cell? Sounds confusing and I've been destroying my brain today trying to figure this out.


          What you want is for your visitors to customize a shoe (or other object)? For instance, you might have three different colors of laces and tread and two different upper colors?

          You can't layer an image swap without using some complex layers and DHTML. I think that would get messy, plus you'd have to test it extensively in multiple browsers, to make sure stuff lines up perfectly.

          I think your two best approaches are
          1) use Flash or
          2) make a different image for every possible variation and then write some custom JavaScript code to keep track of the three variables (lace, upper, and tread) and present the new, appropriate, image whenever one of the values changes.

          But it isn't a simple image swap problem, so quit trying to destroy your brain.
          • 2. Re: layered image swaps??
            basecolor Level 1
            That's the problem I've run into. I've got lines and lines of code here lol that doesn't want to work properly. So far I've gotten as far as 8 layers deep using <div>'s but everytime I hit the button to change another layer it wipes the previous selection. My JS skills aren't that great so I've been in teach myself mode for the last couple of days. So far I have ~ 270 lines of code and thats only 2 layers...the upper and the base color. Each layer has 11 colors to swap and with 8 layers you can imagine the mess I'm looking at. I don't have Flash installed so I was trying to use dynamic code and JS till I ran across Fireworks. I think I can make it work if I redo the art and use pieces of vectors instead of rasterized .gif's

            Thanks for the reply. Wish me luck.
            • 3. Re: layered image swaps??
              pixlor Level 4
              Good luck!

              I have Designing With JavaScript (Amazon link), which is a really nice book for learning from. Gotta love those books where the author isn't out of high school yet. There is a Second Edition with an additional author, which is probably more up-to-date, but I haven't looked at it, so I don't know anything about it.

              Anyway, it covers the use of arrays (which is what you need to track your values) and hand-coding an image substitution. It isn't a language reference, but is is a great teaching book.