Hazel's Scroll Table Tutorial

[Hazel]

Hazel's Table Coding Tutorial!

Now, I do not promise it will make sense. In fact, it probably won't. Some things I can explain well, some things I can't, and this may be one of the latter instances... But we'll see.

Okay, to start off, you're going to need the full table image. I'm going to leave you to make it how you want, because I only know Photoshop and there's a lot of other programs out there. For this tutorial, I'll be using Ghostpaw's table. So, I started with this.

If you have your image, like I do, you're going to start off simple. Mind you, you should either have layers capability (so that you don't end up repeated a row of pixels or something) or you'll have to be very careful you don't grab the same (or skip) a row of pixels when you split that full image into three parts.

First, take a rectangular marquee (selection) tool and select the whole area above where you want your scrolling textbox. Cut this part of the image using ctrl + x. If you prefer, you can use copy, but I like to use cut. This way, if the image is a single layer, there is transparency left where that top part was. Then, when I go to take the middle portion I don't run the risk of repeating or skipping pixel rows and making the image look funky. After you cut or copy, open a new document. If you have photoshop, just clicking "New" will open a document of the perfect size for your cut or copied piece of image. Repeat this for the middle section, where the text box will go, and then again for the bottom, below the text box. I get the following three sections.

Top (first cut, above text box)


Middle (second cut, behind text box)


Bottom (third cut, below text box)

So, if you posted those one line after the other, you'd get the whole image again with no gaps, right? Right. Honestly, you can copy those URLs and check if you want. It's no big deal. Now, save those three pieces and upload them to an image host. Then, take the following code as your base. You're gonna have to remove the asterisks, as some of these codes are installed onto this board, so to speak. Also, I've taken justify out of this. I put it on all my tables, but it isn't required and it takes up space, so I'm ignoring that in this tutorial. I'm sure you can all add that on your own :3


[center][table][tr][td][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,###,true][img]TOP IMAGE URL[/img][/td][/tr][tr][td][atrb=background,MIDDLE IMAGE URL][*style=padding: 0px 0px 0px ###px;][*scrolly:h(###),w(###),sy][color=######][size=1]
text here

[/size][/color][*/scrolly][*/style][/td][/tr][tr][td][img]BOTTOM IMAGE URL[/img][/td][/tr][/table][/center]


Now, in order to highlight certain parts, I'll be putting this code in an image so I can point to certain bits and explain those in detail. So, follow the colors!

Teal - This is the width of the table. It is the width of any of your image pieces, as that value should be the same for all three. For Ghostpaw's, it was 500. This value is in pixels.

Green - This is for the image pieces you had. I put the words in, so just delete those and replace them with your image URLs. Make sure you don't delete any of the square brackets or the comma, or it'll all mess up.

Purple - This is for a pixel value. In Ghostpaw's table, this value is 37. Why? Because the text box on her table is 37 pixels from the left side of the image. In photoshop, I find this value by selecting the whole area to the left side of where I want the text box and I copy it. I use the new document trick to get the exact value. Because photoshop will make the new document the same size as the image copied, all I have to do is look at the width value and put that in here. You could always estimate too, if you like, it'll just take longer.

Blue - This is the text box height in pixels. Just input the pixel height of your middle image, as it will be identical.

Maroon - This is the width of the text box. This does not equal the width of the middle image. In Ghostpaw's table, this value is 429. The purple value determines where the left side of the text box starts, but this value decides how far it stretches to the right. If I made it 300, for example, with Ghostpaw's table, the text box would then be 300 pixels wide without affecting the table width, like so:

[atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,450,true]

[atrb=background,http://i51.tinypic.com/2zdu45l.jpg] [scrolly:h(186),w(300),sy] text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here [/scrolly]

Red - This is the color of the text in your text box. It's a hex code, so keep that in mind.


Now, that should be it, but if you have questions, feel free to ask and I'll do my best to answer them!