need some programming help for an upcoming codec comparison like, comparison, following, something

andy

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: 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?

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.

Something like this ought to do it...

Code:
lt;htmlgt;
lt;headgt;
lt;stylegt;
.page{  position: absolute;  visibility: hidden;
}
lt;/stylegt;
lt;script language=quot;JavaScriptquot;gt;
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';
}

lt;/scriptgt;
lt;/headgt;
lt;div id=quot;page1quot; class=quot;pagequot;   style=quot;visibility:visible;quot;gt;
Here is your first page...lt;br /gt;
lt;a hrcf=quot;#quot; onClick=quot;showLayer('page2')quot;gt;Nextlt;/agt;
lt;/divgt;
lt;div id=quot;page2quot; class=quot;pagequot;gt;
Here is your second page...lt;br /gt;
lt;a hrcf=quot;#quot; onClick=quot;showLayer('page1')quot;gtrevlt;/agt;
lt;/divgt;
lt;/htmlgt;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: 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...

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 quot;page in a pagequot; rather than a complete HTML page that would replace the whole codec comparison page?

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.....

@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..

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

ivailu/nett...lotussarja.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.

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.

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

ivailu/nett...lotussarja.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.

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

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 lt;divgt; 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).

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.

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.Code:
lt;scriptgt; image0 = new Image(); image0.src = quot;reviews/video/nvidia/geforcefx/review/nvidia/aniso/off.jpgquot;; image1 = new Image(); image1.src = quot;reviews/video/nvidia/geforcefx/review/nvidia/aniso/8x-aniso-aggressive.jpgquot;; image2 = new Image(); image2.src = quot;reviews/video/nvidia/geforcefx/review/nvidia/aniso/8x-aniso-balanced.jpgquot;;
lt;/scriptgt; lt;/pgt; lt;p align=quot;centerquot;gt;lt;ing src=quot;reviews/video/nvidia/geforcefx/review/nvidia/aniso/off.jpgquot;
name=quot;myimage1quot; border=quot;0quot;gt;lt;brgt;
   [ lt;a hrcf=quot;javascript:alert('Simply hold your mouse over the link, there is no need to click');quot;
onMouseOver=quot;document.myimage1.src=image0.srcquot;gt;Aniso Disabledlt;/agt; |

lt;a hrcf=quot;javascript:alert('Simply hold your mouse over the link, there is no need to click');quot;
onMouseOver=quot;document.myimage1.src=image1.srcquot;gt;8X Aggressivelt;/agt; |

lt;a hrcf=quot;javascript:alert('Simply hold your mouse over the link, there is no need to click');quot;
onMouseOver=quot;document.myimage1.src=image2.srcquot;gt;8X Balancedlt;/agt; ]
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//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: phrentec//menu.html

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.

phrentec//

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.

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.

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

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.Code:
....
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.
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.)