A webpage for mouse rollover compares

<p> I often find it useful to compare two image by flipping between the two, this is easy with Photoshop and layers but if I want other to see the comparison I need something on the web. It is very easy to produce the code needed to do this on a webpage but not everyone has a website to do this with and it is a bit of a pain to do it each time.</p>

<p>So I have put together a webpage that does this for me, using photos that are already on a hosting site somewhere. </p>

<p>The result looks like this<br>

<a href="tinyurl.com/compare-demo">Link to compare page.</a></p>

<p><br />To setup for that page I have another here, just fill in the fields and push submit.<br>

<a href="http://sewcon.com/compare/index.php"> Link to Setup Page</a><br>

All the info that is needed to compare the photos is in the url, which makes it pretty long. But as long as the photos are still on the hosting site going back to the same url will bring up the same compare page. Since the url is so long I have a link at the bottom for making it into a tinyurl.<br>

For this to work the two images really need to have the same dimensions. I am thinking that this is most useful for things like comparing the output of two different raw converters or levels of jpeg compression. With the images flipping back and forth it is much easier to see small differences between the two photos.</p>

<p>So feel free to use it and let make know what you think.</p>

<p>BTW I am famous for typos so I am sure there are some on the pages, just let me know in as kind a way as you can when you find them.</p>

<p>My first link did not work, try this.<br>

<a href="http://sewcon.com/compare/show.php?B1=Submit&photo1=http%3A%2F%2Fsewcon.com%2Fcompare%2Fdemo_images%2Fnormal_contrast.jpg&text1=Normal+Contrast&photo2=http%3A%2F%2Fsewcon.com%2Fcompare%2Fdemo_images%2Fhigh_contrast.jpg&text2=High+Contrast">Link</a></p>

<p>When you find out let me know... I'm trying to set up a small site for my retouching examples and can't find anything.</p>

<p>The second link I put in works fine. <br /><br />If you are setting up your own site you will want to put the code right in your site, which is pretty simple. You will need to do just a bit of JavaScript but examples are all over the internet. <br /><br />I've put up a very simple example <br /><br /><br>

<a href="http://sewcon.com/rollover/">http://sewcon.com/rollover/</a><br>

<br /><br /><br>

To make this better it should be preloading the images and showing text for the image as well as the image, which is what my other web page does. <br /><br />But that should give you enough to get a good start. You can view the source for the webpage and copy the code if you wish.</p>

Scott, thanks for your efforts. I have not used them yet but had wanted sometimes for easy comparison, much like one of the camera review sites.