How to make a Scrolly Table

[---e v e n i n g]

We'll start with a simple scrolly table.

These are single-image tables that consist of a smattering of coding over ONE IMAGE.

The table is not two separate images, but one big one with an indication spot for the scrolling box to go. This is what I calls a Single-Image scrolly table. To create one of these, first off you require a larger image with a space somewhere on it that does not obstruct the picture that can be colored over into a rectangle or square to house the text box.

So what you do is retrieve a stock image from Deviantart, or Flickr, and go into whatever art program you happen to use- Personally, photobucket is my program, and it can churn out some pretty snazzy images- and you, after manipulating the image in whatever other ways you require, place a semi-transparent rectangle down.

Example:



Note the blue-ish grey rectangle. See what I'm talking about, when I say semi-transparent spot for the scroll box?
Now, after creating an image, you must retrieve the scrolly coding part.

Generally it will be somewhat like this-

CODE::

[center][table][tr][td][atrb=border,THE NUMBER OF YOUR WANTED BORDER THICKNESS HERE,true][atrb=cellSpacing,0,true][atrb=cellPadding,5,true][atrb=width,IMAGE WIDTH GOES HERE,true][atrb=height,IMAGE HEIGHT GOES HERE,true][atrb=background,IMAGE SRC GOES HERE]---Scroll Code Goes HERE---[color=FONT COLOUR][size=0]

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


[/color][/scrolly]
[/size][/td][/tr][/table]

Though only for a single-image table. If you are looking for split tables, that is a whole other ball park, so don't try to form this one into a dual-piece table.

Now, filling in the appropriate width and height of your image, adding in an image link, and experimenting with coordinates to position the scrolly- this is always the most annoying part, for me, and is hard to assist others with sometimes.

Now you have something like so --

[atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,500,true][atrb=height,600,true][atrb=background,http://img217.imageshack.us/img217/8568/194062788974633953.png][scrolly:h(100),w(235),sy,as(position: relative; top: 81px; left: 230px;)]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text [/scrolly]

[/td][/tr][/table]


SCROLLY CODE;;

[scrolly:h(adjust),w(adjust),sy,as(position: relative; top: 81px; left: 230px;)][/center][/justify][/size]