Complete Javascript newbie looking for some basic help

[Pegasus1935]

I'm building a website to catalog a history of college football uniforms, and having something like this on several of the pages would be extremely helpful. I've been told that making it in Javascript instead of Flash would be better for my website. I've also been told that it should be relatively easy to write the code for it.

In short, I want to be able to take the parts of this image and allow viewers of the site to be able to switch between parts to mix and match. There are quite a few teams with six or more possible uniform combinations, so I'd like to be able to do this for the site.

This would probably be a good way to get my start on learning at least some Javascript basics, so would anyone be willing to help me put this together?

[devnull69]

In Javascript you can do that easily combined with CSS "background-image" and "background-position". I've set up an example here: http://jsbin.com/omote4/2

Description:
A div with appropriate width and height is given a background-image. With background-position you determine which part of the background-image will be visible "through" the div. If you change the style.backgroundPosition of that div, you can change which part of the background-image is showing.

Hint: If you hover your mouse on the above mentioned example page you will see a button "Edit using JS Bin" which will lead you to a view of the source code.

[Pegasus1935]

Ok, two questions: can it be set to continually cycle between the parts, so when the user clicks "next" when viewing the last helmet, it starts at the beginning again?

Also, would it be possible to be able to cycle through the jerseys, pants and socks separately, but still have them fit together as they do in the image? I'd like it to be relatively seamless like the example I gave. Sorry, I should have mentioned that initially.

[devnull69]

This would not be an easy task. First of all: The parts you describe overlap each other. You would have to separate everything manually. Second: The background of the image is white ... it should be transparent to allow overlapping. So a lot of preparation ...

But once you achieved that ... it would just be a matter of duplicating the code I gave you and combine it with some CSS positioning/overlapping/z-index techniques. Maybe you should come back after you prepared the image(s)

[Pegasus1935]

You mean like this?






I figured it'd be necessary.

[Pegasus1935]

Ok, I tried messing around with it a bit, but it didn't work out so well.

What did I do wrong?

[devnull69]

Ok you're almost done with the preparation ... if you put the "tightest" possible rectangles around the single parts of the image you'll have to make sure that those rectangles don't overlap. Otherwise you would see the overlapping parts when you don't want to.

Second: For CSS/Javascript you'll have to make sure to match the background-positions, widths and heights to the corresponding image parts. Also the image parts that belong to each other should be equidistant in the image (I think you did that already).

[Pegasus1935]

Originally Posted by devnull69

Ok you're almost done with the preparation ... if you put the "tightest" possible rectangles around the single parts of the image you'll have to make sure that those rectangles don't overlap. Otherwise you would see the overlapping parts when you don't want to.

Second: For CSS/Javascript you'll have to make sure to match the background-positions, widths and heights to the corresponding image parts. Also the image parts that belong to each other should be equidistant in the image (I think you did that already).

Remember, I'm a newbie. What parts of the code do I need to change?

[devnull69]

I am referring to the image you provided originally.

var currhelmetpos = -295;

This is the offset of the left corner of the first helmet (with a minus sign because it has to be moved 295 pixels to the left)

  #helmet {position: relative; width: 154px; height: 78px; background-image: url(http://img.photobucket.com/albums/v189/RXTEWMU/3c6d50d8.png); background-repeat: no-repeat; background-position: -295px 0px; border: 1px dashed #ddd;}

The width and height must be the width and height of the corresponding image part showing one (pair of) helmets. So for other image parts this would be different of course. Again you see the background-position. The first value "-295" is the same as mentioned above. The second value is the amout of pixels the image has to be moved up to have the respective image part on the top. For other parts of the image it has to be a negative number other than 0px

function nexthelmet() {
  if(currhelmetpos>-760) currhelmetpos -= 155;
  document.getElementById('helmet').style.backgroundPosition = currhelmetpos + "px 0px";
}

function prevhelmet() {
  if(currhelmetpos<-295) currhelmetpos += 155;
  document.getElementById('helmet').style.backgroundPosition = currhelmetpos + "px 0px";
}

You'll have to change the numbers here too! -295 will become the left offest of the image part and 155 will be "width of image part plus 1" ... which is the offset to the next/previous image in the corresponding line. The "0px" has to be changed to the negative offset for the vertical movement you already chose above. You can calculate the "upper limit" (which is -760 here) as "startoffset - #ofimages * (imagewidth+1)" = -295 - 3 * 155 = -760

It's not easy ... but I can help you as soon as the image preparation is complete

[Pegasus1935]

Ok, I'm at a loss. It doesn't seem to be saving the changes I've made. http://jsbin.com/omote4/17

[devnull69]

I moved everything to the right place inside each of the container divs. I also implemented cycling.

To do: Moving the divs to the correct partially overlapping positions and change the links to less offending arrow images or something like that

http://jsbin.com/omote4/18

[devnull69]

I changed it again ... now you have a lot more "talking" variables to help you find your way through the code: http://jsbin.com/omote4/19

[Pegasus1935]

Awesome! Thank you so much!

Now, for the teams that only have one helmet and/or one pair of socks, what would I need to do to remove the unnecessary scroll capability?

[devnull69]

If you don't provide a link to "next" or "previous" the user will not be able to scroll ... I would keep the code though. You'll never know when you gonna need it again.

[Pegasus1935]

True, but very few teams out of the 120 have more than one helmet, so most of the time when I use this, it'll be one helmet.