Román Cortés

Xhtml/CSS map/mapa

13 de Mayo del 2008

(see English version below) 

Bastantes personas me han sugerido que realice algún tipo de tutorial de CSS y programación web. De estas sugerencias he decidido ir publicando ejemplos de casos prácticos de desarrollo web, realizados con css y xhtml estricto, accesible, semántico, que funcione en la mayor cantidad de navegadores posibles sin hacks y, por supuesto, que valide.

Mapa con areas que se iluminan

En gran cantidad de webs es necesaria la selección geográfica. Además de ser útiles para tal fin, por regla general, los mapas aportan valor estético al website y consolidan la imagen de empresa.

Al realizar estos mapas con xhtml semántico y no en Flash, aumentamos en gran medida la accesibilidad y Google (y otros buscadores) podrá recorrer todo el website sin problema. Suponiendo que se tratase un mapa de Europa para selección de país, se podrían ordenar alfabeticamente los <li> que conforman los paises y resultaría de gran utilidad en navegadores en modo texto o hablado.

El mapa de ejemplo ha sido validado y probado su correcto funcionamiento en los siguientes navegadores:

Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock y Links 0.98
Linux (Kubuntu): Konqueror 3.5.9

Bajo Windows ha sido probado también en Maxthon 1.6 y 2.1, y funcionando correctamente siempre que no se haga zoom (en ese caso se desplazan las areas seleccionables). En IE 5.5 no pierde la funcionalidad; las areas siguen siendo pulsables, pero no se iluminan (es un problema de IE 5.5 con el xhtml strict).

Descargar este ejemplo

English

Several people asked me for tutorials on CSS and web coding. I’ve decided to publish practical examples in web development, done with csssemantic, accessible and stric xhtml, working in the highest number of browsers as possible without hacks and, of course, valid.

Map with highlight on hover

Lots of websites require a geographic area selection. Not only useful for that matter, usually maps add great aesthetic value to a website.

Creating maps with semantic xhtml and not in Flash, accessibility is highly increased and Google (such as other search engines) will be able to spider all your website without problems. In the case you create, for example, an Europe map for country selection, you could even alphabetically order the contry <li>s and would result of great utility in text/voice mode browsers.

The example’s map has been validated and tested in the next browsers:

Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock and Links 0.98
Linux (Kubuntu): Konqueror 3.5.9

Under Windows, it has been also tested in Maxthon 1.6 and 2.1, working correctly if not zoomed (in that case the areas get displaced). In IE 5.5 doesn’t loose its functionality, but the areas are not highlighted (this is a problem with IE 5.5 and strict xhtml).

Download this example

7 Comentarios RSS

Comentar