Not logged in.Log in
Community CurationPrototype code
Image highlighting demoThis page shows a possible method of highlighting  content in a graphical image - in this example, words on a scanned image showing a page of a book. The method is accomplished by HTML5 (which gracefully degrades to HTML4+CSS3+JS for older browsers) built on-the-fly by an IBM Notes XPage, and involves using the page image as the background graphic of a table. When a word is selected using the navigation content in the right-hand panel, javascript is used to resize and restyle the table to move highlight markers to the new position and appearance. Additionally, the background may be offset from the default origin, and the table resized, in order to reduce the visible area of the page to a more manageable size, although this hasn't been implemented here.

Page number
View scale Size at which the page scan image is drawn. Nominal is 600x800 pixels.
Navigation type Select the user interface type.
Highlight border The border around the selected word's image.
Highlight background The highlight over the selected word's image.
Highlight type Grey bars help locate the highlighted position.

Page imagebiologiacentraliamericana9999_0000.jpg Scanned text



In more CSS3-capable browsers, the transitions are all smoothly animated, and edges of a sub-page selection are smoothly faded by means of a gradient overlay. In Internet Explorer, the only non-CSS3-capable browser in mainstream use , the transitions are instantaneous and edges are hard, but everything degrades gracefully. It works fully in any WebKit browser such as Safari or Chrome, and fully without transitions in IE9. Firefox uses a different method to set background image offsets, and while it can be made to work in this browser, I haven't added the additional code to this demonstration, which is why this demo only shows the full page.

Occasional glitches may appear from time to time due to early support for new CSS3 properties, but as an illustration of concept, this works well, and the potential is clearly visible.Most of the parameters here are calculated from provided metadata, rather than hardcoded, which gives a great deal of flexibility, and allows additional possibilities.
December 2012.
Copyright © 2017/18 MCT, The Open University.
This code is incompletely debugged and optimised.