Ayuda:Extensiones:ImageMap

De GuildWiki2.es
Saltar a: navegación, buscar

La extensión ImageMap nos permite darle a diferentes zonas de una imagen, diferentes hipervínculos.

Uso

Para poder diferencias las áreas de la imagen que queremos que sean hipervínculos del resto de la imagen, utilizaremos coordenadas.

Podemos utilizar un polígono, un rectángulo, o bien un círculo.

  • Polígono
Para los polígonos se dan las coordenadas de los vértices seguidos del enlace.
¡IMPORTANTE! Los polígonos deben ponerse antes que cualquier otra forma
Ejemplo de polígono:
   <imagemap>
      Image:formas.jpg|thumb|center|alt=Formas de imagemap | Imagen de ejemplo, clikea en alguna forma.
      poly 19 149 87 24 165 149 [http://es.wikipedia.org/wiki/Tri%C3%A1ngulo | Triángulo]
   </imagemap>
  • Rectángulo
Para los rectángulos se dan las coordenadas de los vértices superior izquierdo e inferior derecho.
Ejemplo de rectángulo:
   <imagemap>
      Image:formas.jpg|thumb|center|alt=Formas de imagemap | Imagen de ejemplo, clikea en alguna forma.
      rect 330 33 496 151 [http://es.wikipedia.org/wiki/Rect%C3%A1ngulo | Rectángulo]
   </imagemap>
  • Círculo
Para los círculos se dan las coordenadas del centro del círculo y del radio.
Ejemplo de círculo:
   <imagemap>
      Image:formas.jpg|thumb|center|alt=Formas de imagemap | Imagen de ejemplo, clikea en alguna forma.
      circle 257 286 76 [http://es.wikipedia.org/wiki/C%C3%ADrculo | Círculo]
   </imagemap>


La siguiente imagen es un ejemplo de como quedaría: Esta parte es la que da error, asi que se pone entre pre's para no perderla

<imagemap>
      Image:formas.JPG|center|alt=Formas de imagemap | Imagen de ejemplo, clikea en alguna forma.
      poly 19 149 87 24 165 149 [http://es.wikipedia.org/wiki/Tri%C3%A1ngulo | Triángulo]
      rect 330 33 496 151 [http://es.wikipedia.org/wiki/Rect%C3%A1ngulo | Rectángulo]
      circle 257 286 76 [http://es.wikipedia.org/wiki/C%C3%ADrculo | Círculo]
</imagemap>

Notas

  • Para coger las coordenadas de una imagen podemos utilizar el Paint. Veremos que en la barra inferior nos marca un numero segun movemos el cursor por dentro de la imagen (ej. 330,33). Bien cada vez que pongamos las coordenadas se deberán poner sin la coma (ej. 330 33).
  • Como podeis ver en el ejemplo del polígono (que es un triángulo) tenemos los 3 vértices marcados con las coordenadas. Vértice 1 coordenadas 19,149 (19 149), vértice 2 coordenadas 87,24 (87 24) y vértice 3 coordenadas 165,149 (165 149).


Herramientas personales
Espacios de nombres

Variantes
Acciones
Navegación
Herramientas
Compartir
Publicidad