How to create web page for comparing two images, preferably using only (X)HTML and CSS, without JavaScript and DHTML / AJAX?
The simplest solution would be to put two images side by side together, either touching or almost touching and centered both, or each centered in its own half of page. The problem in robust solution is with degradable part.
the two images in question doesn't need to have the same size, for example one can be resized version of the other image; one question would be whether to use HTML attributes to scale them to the same visual size, and whether to center two images or align them to center of the page if they have unequal width:
|_______|_______| |___[xx][xxxx]___|(centered as a whole) vs
|_______|_______| |____[xx][xxxx]__|(aligned to center of page)
the images might be wider than half of the page; I'd rather avoid horizontal scrolling, so perhaps in such case images instead of being side by side would be one above another, and this should be automatic, without using JavaScript to compare width of image with the width of browser window and changing layout on the fly.
The layout in this case should look roghly like below:
|____[xxxxxxx]___| |_____[xxxxx]____|
The goal of this is to have a way to compare images in a web interface for version control system.