need some programming help for an upcoming codec comparison [Archive]

Doom9

14th April 2003, 19:02

Before you get all excited.. there's no timeframe set yet and it's really only something for javascript / flash programmers.

To offer my readers better comparison capabilities I'd like to include some frame switching functinality in my upcoming comparison allowing them to quickly switch from one codec to the other and see the difference.
The following example has often been pointed out: http://koti.mbnet.fi/website/mpeg4test/ . I'd need it for more codecs (at least 8, and the uncompressed one), and I'd like to have a way to add a comment for each codec, which would only show when the current codec is displayed on screen.
Any solution must be based client side technology. Java is pretty bulky so I was thinking javascript or flash (you gotta admit, the above site looks pretty nice).
Any takers?

int 21h

14th April 2003, 19:15

CSS with layers and JavaScript, this would provide an immediate next/previous functionality with no loading required (since the invisible layers would be loaded with the page). This would also provide the advantage that no special software or authoring technique would be needed to produce the page. Simply provide the appropriate 'div' tags to name each layer.

int 21h

14th April 2003, 19:28

Something like this ought to do it...

<html>
<head>
<style>
.page{
position: absolute;
visibility: hidden;
}
</style>
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(target) {
hideLayer(currentLayer);
document.getElementById(target)
.style.visibility = 'visible';
currentLayer = target;
}

function hideLayer(target) {
document.getElementById(target).
style.visibility = 'hidden';
}

</script>
</head>
<div id="page1" class="page"
style="visibility:visible;">
Here is your first page...<br />
<a href="#" onClick="showLayer('page2')">Next</a>
</div>
<div id="page2" class="page">
Here is your second page...<br />
<a href="#" onClick="showLayer('page1')">Prev</a>
</div>
</html>

xox

15th April 2003, 11:31

Originally posted by Doom9
Before you get all excited.. there's no timeframe set yet and it's really only something for javascript / flash programmers.

To offer my readers better comparison capabilities I'd like to include some frame switching functinality in my upcoming comparison allowing them to quickly switch from one codec to the other and see the difference.
The following example has often been pointed out: http://koti.mbnet.fi/website/mpeg4test/ . I'd need it for more codecs (at least 8, and the uncompressed one), and I'd like to have a way to add a comment for each codec, which would only show when the current codec is displayed on screen.
Any solution must be based client side technology. Java is pretty bulky so I was thinking javascript or flash (you gotta admit, the above site looks pretty nice).
Any takers?

Gotta make sure that the pages are 'viewable' by all users. The site you mention is a bit of a pain honestly - took a while to load the whole page even with my 512/128K connection. Imagine how bad would it be for 56K users...

Doom9

15th April 2003, 17:34

xox: loading a large number of images is always painful.. it takes long to load my current codec comparison so that argument doesn't really count (and is completely ot ;)

@int21h: Am I correct to assume that a page in your example actually refers to a "page in a page" rather than a complete HTML page that would replace the whole codec comparison page?

iwod

16th April 2003, 11:16

A notes nothoing got to do with programming.....

Actually i would rather it changes the pictures when on mouse over rather than clicking on the link.

Anyway i remember anandtech did some sort of similiar things as well with one of their reviews.

Actaully that page took me less than 2 sec to load..... :D

Doom9

16th April 2003, 12:18

@iwood: the link was posted in the thread regarding another mpeg4 comparison so I know what you mean. The drawback with that method is the following: you have one baseline image.. probably the uncompressed version. So, using mouseover you can easily compare codec X vs the original, but what you cannot do is switch between codec X and codec Y unless the 2 links are right next to each other. And I think the difference between two codecs is more important than the difference between the original and a certain codec..

Valky

16th April 2003, 12:53

This is also one of my favourite and very informative site:

http://www.nikkemedia.fi/ivailu/nettikurssit/valokuvailmaisu/esimerkit/myllyjarvi/valotussarja.htm

It demonstrates different settings used in digitalcamera when adjusting how much light user adjust. The picture in the middle is reference (shot using cameras automatic setting) and all other settings can be seen when moving mouse over the pictures.

LordDethstar

16th April 2003, 13:01

While the idea of using active content for your next codec comparison sounds good, I beg you not to use flash. I personally think flash ist a pain in the @$$, since it only appears to be used in annoying ways by 3rd-rate sites and online ads. For that reason I have it disabled / not installed. I would greatly appreciate it if the comparison worked on a standard browser with no required plugins.

int 21h

16th April 2003, 15:34

Originally posted by Valky
This is also one of my favourite and very informative site:

http://www.nikkemedia.fi/ivailu/nettikurssit/valokuvailmaisu/esimerkit/myllyjarvi/valotussarja.htm

It demonstrates different settings used in digitalcamera when adjusting how much light user adjust. The picture in the middle is reference (shot using cameras automatic setting) and all other settings can be seen when moving mouse over the pictures.

Dreamweaver.

int 21h

16th April 2003, 15:34

So I take it my CSS + Javascript is a stupid idea?

Doom9

16th April 2003, 17:28

So I take it my CSS + Javascript is a stupid idea?I don't think so. It's just that without a visual example it's a bit hard to imagine how it works exactly. I guess I'll have to give it a try over Easter. If I can make any HTML code I put in the <div> disappear then that would be just what I'm looking for (and I'm hoping that browsers understand it... you know how certain browsers can't even handle a simple CSS script).

wmansir

16th April 2003, 19:58

Originally posted by Doom9
@iwood: the link was posted in the thread regarding another mpeg4 comparison so I know what you mean. The drawback with that method is the following: you have one baseline image.. probably the uncompressed version. So, using mouseover you can easily compare codec X vs the original, but what you cannot do is switch between codec X and codec Y unless the 2 links are right next to each other. And I think the difference between two codecs is more important than the difference between the original and a certain codec..

If you look at the source of the page I linked to (in the other thread) you will see there is an OnMouseOut command that restores the original image. But of course it doesn't have to do that. I'm not a web designer so I'm sure there are people here who know more about it, but I just wanted to make you aware that that is not really a limitation.

wmansir

16th April 2003, 20:19

Make a simple .html file with this code to check it out. It worked in IE without the header or other additional HTML. Just paste in Notepad and save as .html.

<script>
image0 = new Image();
image0.src = "http://images.anandtech.com/reviews/video/nvidia/geforcefx/review/nvidia/aniso/off.jpg";
image1 = new Image();
image1.src = "http://images.anandtech.com/reviews/video/nvidia/geforcefx/review/nvidia/aniso/8x-aniso-aggressive.jpg";
image2 = new Image();
image2.src = "http://images.anandtech.com/reviews/video/nvidia/geforcefx/review/nvidia/aniso/8x-aniso-balanced.jpg";
</script>
</p>
<p align="center"><img src="http://images.anandtech.com/reviews/video/nvidia/geforcefx/review/nvidia/aniso/off.jpg"
name="myimage1" border="0"><br>

[ <a href="javascript:alert('Simply hold your mouse over the link, there is no need to click');"
onMouseOver="document.myimage1.src=image0.src">Aniso Disabled</a> |

<a href="javascript:alert('Simply hold your mouse over the link, there is no need to click');"
onMouseOver="document.myimage1.src=image1.src">8X Aggressive</a> |

<a href="javascript:alert('Simply hold your mouse over the link, there is no need to click');"
onMouseOver="document.myimage1.src=image2.src">8X Balanced</a> ]

With a little more code you could probably add a text box of some type that identified the current image and commented on it. But like I said, I'm no expert. Perhaps CSS can handle this type of job better.

ps. I was going to edit this into my previous post, but I can't preview an edit and I wanted to make sure the code displayed correctly.

phrentec

16th April 2003, 20:50

http://www.geocities.com/phrentec/doom9/menu.swf

Here is my attempt. Very basic, I agree it can definitely use some cosmetic changes to it and there is no preloader so you will have to wait while it loads the pictures from the jpegs whithin the directory.

edit: http://www.geocities.com/phrentec/doom9/menu.html

wmansir

16th April 2003, 21:36

Phrentec, if I click on your link I get a geocities' page unavailable. But if you follow this link first and then click on your menu.swf file it works, at least for me.

http://www.geocities.com/phrentec/doom9/

I think it's a good start for a flash implementation. I do think the comments need a separate area so you can read them and see the picture at the same time. It would also reduce the number of activation points since one trigger could bring up a picture and it's comments.

kxy

16th April 2003, 22:17

The thing I like the most about the site is the keyboard switching, it allows me quickly switch back and forth and see the differences myself. So please whatever you do, consider keyboard switching, not mouse hovering.

phrentec

16th April 2003, 22:45

okay i added the key switching, kxy.
it goes z x c v for the corresponding pics
and a s d f for the comments

int 21h

16th April 2003, 23:49

That script is the product of Dreamweaver, its autogenerated, the signature is the MM array that it uses to swap images.

Originally posted by wmansir
Make a simple .html file with this code to check it out. It worked in IE without the header or other additional HTML. Just paste in Notepad and save as .html.

....

With a little more code you could probably add a text box of some type that identified the current image and commented on it. But like I said, I'm no expert. Perhaps CSS can handle this type of job better.

ps. I was going to edit this into my previous post, but I can't preview an edit and I wanted to make sure the code displayed correctly.

int 21h

17th April 2003, 00:41

http://www.geocities.com/thefrail2k3/

More than likely positioning and alignment will be major fscked on anything other than 1024x768 because of the size of those images... This code should be compliant with all 5.x+ browsers (IE, Navigator, Khameleon, etc.)

((( atom )))

17th April 2003, 02:14

i have a wish here:
when following the links, i wished there was a possibility scale the examples up by factor 2.
i happen to have a big monitor and when using virtualdub for example scaling the image up by factor 2 gives you a really good idea of what to expect.
trying to compare the codecs for me was quite a downer, because i could hardly spot out the differences.
i guess many people would get a 2x-image on their monitors and be happier with it.

..just a comment.

phrentec

17th April 2003, 21:44

atom, you can always just use one of Opera 7.1's new feature which you can find under file>preferences>multimedia>smoothzoomingofimages
It's pretty self explanatory but after that option is checked just zoom the page to %200 for a better look. I think it resizes the page and images(including flash) using a bicubic resize or something like that.

((( atom )))

18th April 2003, 13:24

thx for the hint.

but it would still be a nice "out-of-the-box-feature"

btw, doom9:
will you take xvid-devels into comparison? please do!

phrentec

19th April 2003, 06:48

atom: putting too much actionscript (for zooming etc) into it could make it a bit cpu intensive and take it a little while longer to react/load/display although I do agree that it would be a good feature.

I posted the .fla at http://www.geocities.com/phrentec/menu.fla

on that koti.mbnet.fi/website/mpeg4test/ site all the pictures in the swf's get loaded whether or not you want to view them which is about the same as when the pictures are in an html page, they ALL get loaded. but the way this one was done was through the loadMovie() where until before the action gets executed, in this case through the mouse rollOver event, it won't load all the pictures at once but will only load the pictures that the user wants (to compare) and thereby saving bandwidth

phrentec

20th April 2003, 20:03

ok i got a copy of a compiled html version of "ActionScript for Flash MX: The Definitive Guide, 2nd Edition" and went through its zoom and pan section a bit. and so i added zoom amd pan to the codec comparison swf. i hope it works right this time.
http://www.geocities.com/phrentec/doom9/mn.htm

edit: it also includes a simple preloader. but it seems to repeatedly load the image which kind of takes out the point i was trying to make in the previous post (or does it load just from the browser cache or locally after the first time) i'm not sure.

the original one can still be found at http://www.geocities.com/phrentec/doom9/menu.html

Doom9

20th April 2003, 21:44

@atom: of course, I even get a special build for my comparison, the developers were given a 2 week notice in advance and they can also suggest encoding settings to ensure that the comparison will show each codec in its best light.

@phrentec: impressive. If only I could put the text to the right of the image (and as plain html text rather than images).

@int21h: that's how I thought it would be.. nice.

phrentec

21st April 2003, 09:11

it now loads the text from a file called text.txt within the directory. http://www.geocities.com/phrentec/doom9/menufrmtxt.htm
If only I could put the text to the right of the image

hmm.. okay how about like this
http://www.geocities.com/phrentec/doom9/menufrmtxtright.htm

only problem is that no matter what i try i can't get the text to wrap around in a text box in flash so all i get is scrolling from side to side instead of up and down.

Doom9

21st April 2003, 16:41

@phrentec: nope, that's not it. How about adding text using the mechanism int21h described?

((( atom )))

21st April 2003, 18:37

@atom: of course, I even get a special build for my comparison, the developers were given a 2 week notice in advance and they can also suggest encoding settings to ensure that the comparison will show each codec in its best light. ah, very nice.. so this will be a very interessting comparison!

@ phrentec: thx for the zooming-feature - i'll write what i think of it, hope you won't be pissed:
personally i was wanting a bigger total picture, since i am used to it and it really makes comparing easier.
i would prefer having tow choices: 100% or 200%, because no rescaling would have to be done t the picture, but i am sure, everybody waould want something different here..

all in all i must say that this comparison will be very ice, thx to you guys!

int 21h

21st April 2003, 19:00

Isn't Flash recompressing these pictures after you import and save them?

phrentec

21st April 2003, 19:27

Originally posted by int 21h
Isn't Flash recompressing these pictures after you import and save them?

nope because the pictures here aren't imported into flash before compiling. instead i used the loadMovie() function in flash which, once it is called on like through the mouse with an on(event) handler, loads the pictures directly from outside of the movieclip. you can sorta say that it works just like a picture viewer, it doesn't compress it to view it it just displays it.

@Doom9: I have no idea how to do that 'mechanism' into flash.

@atom: the zooming makes the coding very sloppy so I'll put it back if Doom9 wants it. as for now flash can already zoom in the clip from within the browser, just right click and click on 'zoom in' and pan to the spot you are trying to compare and then hit one of the keys z x c or v to view the corresponding images.

edit: okay i figured it out, the dynamic text that now comes from the file textr.txt from within the dir. now wraps around hence it can now scroll down. yes!:)
http://www.geocities.com/phrentec/doom9/menufrmtxtright.htm

Last edited by phrentec on 21st April 2003 at 23:28

edit: I just added a slider to control the brightness.

Doom9

22nd April 2003, 21:52

hmm.. I don't suppose you can make that textfield adjust with the browsersize and get rid of the ugly scrollbars, can you? can you tie flash buttons to a javascript command? That would allow to use the flash for the image selection and zooming, and int21h's mechanism to show different text. In fact, int21h's solution does exactly what I asked for, zooming is a bonus I gladly take if it works nicely (also somebody will have to come up with a nicer presentation mode;) but if not, there's always another codec comparison..

Scipio

23rd April 2003, 00:00

i guess many people would get a 2x-image on their monitors and be happier with it.

although I like the zooming idea (great realization by phrentec), you can also just tell people to switch their desktop resolution to so 800*600 for the comparison if they are really interested.

@ Doom9: Why don't you tell me about this kind of problems... ;)

Hm... I have my own suggestion which is VERY simple and involves virtually no design change in your comparisons... but having seen all these great implementations (and with int21h's being very simple too, browser-wise), I guess my suggestion is a bit to basic.

The only advantage of my solution: 100% no Java/JS/Flash involved. The "trick" is done with anchor-jumping. :D

But I'll make a little demo for ya anyway... please hold the line...

here it is:
http://www.doom9.de/codec-deathmatch.htm

some final words... you could also have the menu in a frame... (menu = the three links at the beginning). not much more to say... aaah, one thing: by pressing Backspace on your keyboard you can flip back, clicking on the picture takes you forth. so with backspace and left mouse button, you can compare those pics easily.

phrentec

23rd April 2003, 08:16

textfield adjust with the browsersize and get rid of the ugly scrollbars
done. it took some hard ugly coding to force the text field to resize to the browser window's width since it's not as easy as html where you simply set the value of the width of a table to a certain percentage. the text box(field) in its entirety is now done it actionscript. in the future i could disable the bounding grey box around the text if you want.
flash buttons to a javascript command?
I don't know if that is possible and haven't figured out what exactly you mean by that.
somebody will have to come up with a nicer presentation mode
hehe. i can change the whole layout and start anew if you wish or better yet if you want you can draw out a little flowchart type thing or make up a picture showing how exactly you want it to look like, it can be any way you want. also i have put up the .fla if you want to go through it.

here's the new stuff:
http://www.geocities.com/phrentec/doom9/menuresztxt.htm
http://www.geocities.com/phrentec/doom9/menuresztxt.fla.zip

I also agree that int21h's way is pretty much all that is needed. zooming, brightness, and all that other stuff is just a bonus that isn't really necessary.:)

iwod

23rd April 2003, 10:30

A side notes.... possible to include nero digital?

Doom9

23rd April 2003, 15:19

@iwod: how can I test a product that isn't even out yet? Seems kinda hard and the list of participants has been fixed for over a week. In fact, I've encoded more than half of the source movies already.

int 21h

24th April 2003, 00:49

Originally posted by phrentec
I also agree that int21h's way is pretty much all that is needed. zooming, brightness, and all that other stuff is just a bonus that isn't really necessary.:)

I can do brightness in CSS. Can't do zooming without reloading the page (if at all).

phrentec

24th April 2003, 01:55

I can do brightness in CSS.

That will be terrific! can you please add it to your sample page, i would really love to see it. brightness in flash is pure actionscripting and if it is possible with CSS then using flash for this comparison is really uneeded.

int 21h

24th April 2003, 04:28

I wasn't thinking coherently, I can do alpha in CSS, which would only get darker (well translucent really), it wouldn't help for brightness, there is no brightness filter for CSS.

phrentec

24th April 2003, 04:49

if you can control the alpha in CSS then shouldn't there alse be a way to control the RGB value as well? because you could then just increase or decrease all three values (red green blue) and that would give the brightness effect.

int 21h

24th April 2003, 06:38

Nope, the only on-the-fly filtering is only the alpha channel (a.k.a. opacity) to change transparency. You can't directly manipulate seperate channels of color... tons of Java applets to do it though (ick).

phrentec

24th April 2003, 08:59

yuck nevermind java applets would really kill it.

@Doom9: I wanted to bring up a certain issue before the next codec shoot-out. With the advent of the Electrokompressiongraph (EKG) it made me realize that just comparing different codecs on the same clip doesn't make it quite equal enough to judge at. The EKG can be used on a video to specify which places/(frames) get more bitrates used and which get less bitrates used. also with the 2-pass(or nthpass)sytem the codec controls where amounts bitrate get used. so like if you specify the codec to use 581kps on a movie/clip and choose to use frame number X to take the screenshot and compare, the codec may not have used the same number of say 581kps/fps on that frame as another codec which may have automatically specified to use less/more bits on that scene thus resulting in a better/worser quality than the other encoded clip which results in an unequal comparison. It would probably be more fair if somehow you could specify as close as you can to use the same amount of bits for a frame or certain scene instead of comparing it with different codecs using different amount of bits on the same frame.
I hope that didn't sound too confusing.

regards.

((( atom )))

24th April 2003, 09:16

@phrentec

i would say right that is the comparison. we want to see how good can the codec handle things. we simply take let's say 5 scenes and the overall better will be obvious. if the codec gives to little bitrate to a certain scene, it is the codecs problem and i won't like it. also one codec might manage to give better results with less bitrate on certain scenes than the other. if all codecs produce clips of the same size, one can go and choose the best overall in terms of visuall quality.

(there are small cars that go damn fast..)

Scipio

24th April 2003, 13:23

@phrentec:

you suggest that we should compare frames with exact the same size (byte-wise)?

I don't think that's relevant to the average user. When comparing codecs it makes most sense if you just encode the same full clip/movie at defined settings (reproducable).

yuck nevermind java applets would really kill it.

what does "yuck" mean?
in respect to java applets: They don't kill a thing. You only have to make sure that they are "only additional". By this I mean that everything has to be viewable withouth any Java or JavaScript but with Java enabled you get more comfort. Doom9 wants the site to be most compatible AFAIK.

phrentec

24th April 2003, 17:54

okay i guess then it doesn't matter if the frames are not the same byte size but really it just matters on how the codec would handla a hight motion or low motion scene.

i said yuck because java always takes on way more of a severe load on my computer as opposed to flash or javascript/css.

Doobie

24th April 2003, 18:54

Originally posted by phrentec
I wanted to bring up a certain issue before the next codec shoot-out. With the advent of the Electrokompressiongraph (EKG) it made me realize that just comparing different codecs on the same clip doesn't make it quite equal enough to judge at.

Doom9 is encoding the clips. If he were going to "cheat", he'd sooner just up the bitrate than bother with EKG. EKG is a great thing to improve overall quality, and it's totally fair to use where its supported. Indeed, EKG isn't the first time there has been artificial bit manipulation. From the early days of SBC, any Divx3 user was negligent for not takings bits from the credits.

Comparing frames of the same size is, uh, dumb. We're not comparing compression of single snapshots from a still camera, but frames from a movie and we need to know how well the bits are spread throughout the movie. So, we control the size of the movie, not the frame, and simi-randomly select frames to compare.

Doom9

24th April 2003, 19:13

to counter effects from different rate control mechanisms I have always picked low motion and high motion scenes.. if a codec uses more bits in a high motion scene you'll see that in the low motion scenes, and inversely. Plus, I write it every time, you cannot go by images.. while they are taken at points to illustrate certain effects the comments regarding the quality of a scene are much more valuable (but of course doing your own tests is the only way to make sure). I'd do it without screenshots (they were a chore to make prior to mpc) but then people would start screaming.

Doom9

4th May 2003, 00:37

@int21h: I've finished the comparison but for the live of it, I can't turn it dynamic. First of all I seem to be unable to add any text below the image, which is of course a must. I can put a series of paragraphs to move the text to be placed in the next paragraph after an image to the right position by entering a number of <p>s but that's not really the point, is it?
Also, what is style="top: 30%;" used for?

int 21h

4th May 2003, 04:13

That positions that particular element.. in retrospect, you'd probably want that to be all relative positioning instead of the absolute positioning I used in that example...

A very easy way to get the text to align up correctly, is to make the image its own element and assign it the float property. (http://www.w3schools.com/css/pr_class_float.asp)

Here is a way better example's code, if you need any of it explained let me know... just think of the divs and spans as containers of sorts.

<html>
<title>Here is my awesome VISUAL example</title>
<head>
<style>
.layercontainer{
position: relative;
}
.layer{
position: absolute;
visibility: hidden;
}
.content{
visibility: visible;
position: relative;
width: 95%;
text-align: center;
padding: 5px;
}
.picturecontainer{
float: left;
}
</style>
<script language="JavaScript">
var currentLayer = 'codec1';
function showLayer(target) {
hideLayer(currentLayer);
document.getElementById(target)
.style.visibility = 'visible';
currentLayer = target;
}

function hideLayer(target) {
document.getElementById(target).
style.visibility = 'hidden';
}

function brightness(image, opacity){
if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
document.getElementById(image)
.style.MozOpacity=opacity/100
else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
document.getElementById(image)
.filters.alpha.opacity=opacity
}

</script>
</head>
<body style="background: #DEDEDE; ">

<div id="content1" class="content">

Please forgive the crudity of this mockup, and also overlook
the fact that all the images used in this 'comparison' are
really just the same images, with different text in the image.
This should suffice however to provide a basic idea of what
this layout would look like...
<br /><br /><br />
<b>First Test-Scene</b>
<br /><br /><br />
<a href="#" onClick="showLayer('codec1')">Codec-X</a> //
<a href="#" onClick="showLayer('codec2')">Codec-Y</a> //
<a href="#" onClick="showLayer('codec3')">Codec-Z</a>
</div>

<div class="layercontainer">
<div id="codec1" class="layer" style="visibility:visible;">
<span class="picturecontainer"><img src="pic1.jpg" id="pic1"></span>
This is Codec-X, Codec-X sucks because its developed by X-Networks.
They go to banquet while their peasants starve. You can easily see
that this text makes no sense at all, but its just filler.
</div>

<div id="codec2" class="layer">
<span class="picturecontainer"><img src="pic2.jpg"></span>
This is Codec-Y. Codec-Y rules because its built by men who started
at the bottom and worked their way up. These men are porn stars in
Beverly Hills now.
</div>

<div id="codec3" class="layer">
<span class="picturecontainer"><img src="pic3.jpg"></span>
This is Codec-Z. Codec-Z has been out for too long now, and we should
get rid of it. It smells very funny and it tastes like old dishwater.
</div>
</div>
</body>
</html>

Doom9

4th May 2003, 14:22

well.. I think I understand the basic idea pretty well, but my problem isn't solved. I need to put text below the image. In the HTML code at this position:

</div>
And now we move to the 2nd scene, blah blah blah
another <div class="layercontainer"> goes here> </div>
etc
</body>
</html>

If I do that, the "And now we move..." text is placed behind the image.. that's not really what I need. Can you make an example that has text below the image, followed by another image block.. just the way the comparison looks.
I'm sorry I have to act so n00bish but I currently really don't have time to learn the advanced options of CSS. The comparison is going to be published tonight with CSS or without, I've spent every free minute in the last 3 weeks on this and if takes me more days just to change the presentation then I opt for release over presentation.