css image maps
For the past few years, BritishMac.com has used image maps for the hyperlinks on several of it’s main pages. A major downside to these image maps for some website visitors has been their inaccessibility in non-graphical browsers. However, the image maps play a considerable part in defining the quirkiness of the website which accompanies the podcast.
The solution being worked on for the future will be to (hopefully) use css image maps. Visitors to the website using graphical browsers probably won’t notice any significant difference - although additional information may be available when mousing over a link area. Anyone visiting the website with a text browser will be presented with either an ordered / unordered list, or definition list and hyperlinks plus definitions (currently all they get is a brief description of the image).
‘Traditional’ image maps work by starting with an image and mapping hyperlinks to the co-ordinates for areas of the image. When a web browser loads the page it loads an image with some extra data relating to the image included in the webpage’s code - if the image isn’t displayed then the hyperlinks can’t be easily accessed.
Css image maps start with an HTML list (either ordered, unordered or definition). An image is then created and co-ordinates are calculated which correspond to areas of the image. A css style sheet is written which specifies a number of IDs &/or Classes which relate to the areas of the image to be mapped and actions. Finally the IDs &/or Classes are associated with individual items within the HTML list(s). When a web browser laods the page it is actually loading a list including links and additional information with the image(s) overlaid using css.
That attempt at a description is probably all as clear as mud, but might make sense to someone apart from me. The real challenge isn’t actually about creating the css image map quite as much as finding a way for people to be able to do so using Freeway Pro…..
Watch this space - but don’t be suprised if it takes a while for me to sort out.