Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSA Photograph Gallery - using <object>

Date : 6th June 2009

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.

photographs © stu nicholls - CSS play


Information

It has been a little while since I played with the 'object' element so I thought that I should revisit it to see how the latest browsers handle it.

You will be pleased to hear that all browsers now recognise the basics of this, but not so pleased to hear that IE (including IE8) fail to allow the basic targetting of the element to change the content.

All non-IE browsers allow you to use simple html to change the data source, and the above demonstration shows how this might be used for a photo gallery where the large image is held in a separate html file that is displayed in the 'object' element.

Clicking another thumbnail will change the 'object' content.

If you use xhtml1.0 transitional you can still use the 'target' in a link and the page will validate.

Oh, and for IE users I have use conditional comments to feed you with an 'iframe' instead of an 'object' so that this demo will also work for you.

This also validates because the validator will not see the iframe.

The photographs used are ones I took whilst on holiday in Austalia and Singapore last year (2008).

Please ask if you wish to use any of these images.

7th February 2013

IE10 does not support the object element and has also dropped support for conditional comments so there is no way to target this browser to use an 'iframe' instead of 'object'. So I have just used an iframe for all browsers.


You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page