Skitergia

Parametrizando el mundo



Mapeado html de imagen y links a etiquetas

by Skiter on 26 marzo, 2013

Mir ando el manual de referencia del formato KML de Google Earth para trazados de rutas, en la página con la documentación me encuentro un diagrama de arbol muy clarito y bien definido en el que se puede ir pinch ando en los diferentes atributos y nos lleva directamente al apartado donde explica sus peculiaridades.

diagrama de árbol de clases

Object element (parent) gx:Tour element; child of Feature NetworkLink element; child of Feature Placemark element; child of Feature Overlay element; child of Feature Container element; child of Feature Feature element Geometry element; child of Object PhotoOverlay element; child of Overlay ScreenOverlay; child of Overlay GroundOverlay element; child of Overlay Folder element; child of Container Document element; child of Container Point element; child of Geometry LineString element; child of Geometry LinearRing element; child of Geometry Link element: child of Object Icon element; child of Link Orientation element; child of Object Location element; child of Object Scale element; child of Object Polygon element; child of Geometry MultiGeometry element; child of Geometry Model element; child of MultiGeometry gx:Track element; child of Geometry Style element; child of StyleSelector gx:MultiTrack element; child of Geometry StyleSelector element; child of Object StyleMap element; child of Style Selector TimePrimitive element; child of Object TimeSpan element; child of TimePrimitive gx:TimeStamp AbstractView element; child of Object Camera element; child of AbstractView LookAt element; child of AbstractView Region element; child of Object Lod element; child of Object LatLonBox element; child of Object LatLonAltBox element; child of Object gx:LatLonQuad element; chid of Object SubStyle element; chid of Object BalloonStyle element; child of SubStyle ColorStyle element; child of SubStyle ListStyle element; child of SubStyle gx:TimeSpan element; child of TimeSpan TimeStamp element; child of TimePrimitive LineStyle element; child of ColorStyle PolyStyle element; child of ColorStyle IconStyle element; child of ColorStyle LabelStyle element; child of ColorStyle gx:TourPrimitive element; child of Object gx:AnimatedUpdate gx:FlyTo element; child of TourPrimitive gx:SoundCue element; child of TourPrimitive gx:TourControl element; child of gx:TourPrimitive gx:Wait element; child of gx:TourPrimitive gx:PlayList element; child of Object

Me resulta muy curioso (y útil) y mir ando debajo de las faldas veo que es un simple mapa de una imagen gif, con enlaces a etiquetas distribuidas por el código.

<img src=” classTree52.gif” alt=” diagrama de árbol de clases” usemap=” #Map” />
<map name=” Map” id=” Map“>
<area shape=” rect” coords=” 8,34,101,80” href=” #object” alt=” Object element (parent)” />
<area shape=” rect” coords=” 74,699,140,715” href=” #gxplaylist” alt=” gx:PlayList element; child of Object” />

</map>
ddd

Ech andole un vistazo al código, vemos que se define un mapeado con la etiqueta <map> y que cada area a definir lleva la etiqueta <area> .

De area , nos interesa sobre todo los atributos shape y coords , que son los que definen el tipo de area a definir y las coordenadas donde se definen.

Shape puede tomar los valores, que repercutirán en los valores del atributo coords :

  • default : define toda la imagen como un area
  • rect : define un cuadrado, que viene dado por 4 coordenadas, (x1,y1) para la esquina superior izquierda de la selección, y (x2,y2) para la esquina inferior derecha de la selección.
  • circle : define un circulo, que viene dado por tres coordenadas (x1,y1) para el centro del circulo y (r1) para el radio.
  • poly : define un poligono dado mediante una lista de coordenadas (xn,yn) con cada uno de los vértices del polí­gono. Si la última coordenada no coincide con la primera, el navegador se encargará de cerrar el poligono mediante una linea recta entre ambas (pod donde caiga).

Despues de esto, solo queda definir en el atributo href el valor de una etiqueta de nuestro texto, precedida siempre por el caracter # .

Así­, donde pongamos un enlace vacio con esa etiqueta como nombre (aqui sin el caracter # ), al pinchar en la zona del mapa se irá directamente ahi.

<a name=” object“></a>
.      Aqui irí­a nuestro parrafo explic ando Object
<a name=” gxplaylist“></a>
.     Aquí­ irí­a nuestro parrafo explic ando gxplaylist

Facil, muy facil . Sencillo, muy sencillo . Y viejo, pero muy funcional . De lo cual se demuestra que para hacer las cosas bien no hace falta una gran tecnologí­a, sino una correcta aplicación de la misma, y una información correctamente estructurada para que sea clara e inteligible…y no hace falta ser Google para eso ;D

A %d blogueros les gusta esto: