Cómo construir un mapa de imagen con CSS

opciones

Quería algo 'geek', así que me decidí por un gráfico de 'bolsillo' que contenga todos los métodos de suscripción para mi blog.

En los días de la Web 1.0, se podía construir una colección de enlaces como este empalmando su imagen con enlaces en cada gráfico, luego tratando de coserlo todo junto con una tabla. También podría lograrse utilizando un mapa de imagen pero eso generalmente requiere una herramienta para construir el sistema de coordenadas. El uso de hojas de estilo en cascada hace que esto sea mucho más fácil ... ¡sin empalmar imágenes y sin tratar de encontrar una herramienta para construir su sistema de coordenadas!

  1. Crea tu imagen que te gustaría usar. Puede utilizar este gráfico a continuación (haga clic con el botón derecho y guárdelo para descargarlo):
    Opciones
  2. Sube tu imagen a un directorio que sea relativo a tu CSS. En WordPress, esto se puede hacer más fácilmente colocándolo en una carpeta de imágenes en su directorio de temas.
  3. Agrega tu HTML. Es agradable y simple ... un div con tres enlaces:
    > div id = "subscribe">> a id = "rss" href = "[enlace de su feed]" title = "Suscribirse con RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[su enlace de suscripción de correo electrónico]" title = "Suscribirse con correo electrónico" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[su enlace móvil]" title = "Ver versión móvil" >> span class = "ocultar"> Móvil> / span >> / a>> / div>
    
  4. Edite su hoja de estilo en cascada. Agregará 6 estilos diferentes. 1 estilo para el div general, 1 para la etiqueta a para que no muestre ninguna decoración de texto, 1 estilo para ocultar el texto (utilizado para accesibilidad) y 1 especificación de estilo para cada uno de los enlaces:
    #subscribe {/ * bloque de imagen de fondo * / display: block; ancho: 215px; altura: 60px; background: url (images / options.png) sin repetición; margen superior: 0px; } #subscribe a {text-decoration: none; } .hide {visibilidad: oculta; } #rss {/ * Enlace RSS * / float: left; posición: absoluta; ancho: 50px; altura: 50px; margen izquierdo: 20px; margen superior: 5px; } #email {/ * Enlace de correo electrónico * / float: left; posición: absoluta; ancho: 50px; altura: 50px; margen izquierdo: 70px; margen superior: 5px; } #mobile {/ * Enlace móvil * / float: left; posición: absoluta; ancho: 50px; altura: 50px; margen izquierdo: 130px; margen superior: 5px; }

El posicionamiento es agradable y simple ... agregue una altura y un ancho y luego establezca el margen izquierdo desde el lado izquierdo de la imagen, y el margen superior desde el lado superior de la imagen.

Esta publicación de "Cómo hacer" es para ingresar al El último concurso de "Cómo hacerlo" de los frikis son sexys! Una nota, es cierto que un mapa de imagen puede tener polígonos mucho más complejos, pero realmente no he visto demasiados lugares donde eso es imprescindible. Me di cuenta de esa gran imagen RSS en la barra lateral Geeks are Sexy ... es un buen lugar para un enlace. 😉

ACTUALIZADO 10/3/2007 para una mejor accesibilidad con el asesoramiento de Phil!

Patrocinador: Si es un novato en el diseño web, entonces cree su propio sitio web de la manera correcta usando HTML y CSS, la segunda edición es imprescindible. En esta guía fácil de seguir, aprenderá a crear un sitio web de la mejor manera posible, ¡haciéndolo usted mismo!

41 Comentarios

  1. 1

    Doug, parece un buen método, pero es muy inaccesible.

    Considere un usuario ciego con un lector de pantalla, un usuario con un navegador de solo texto o cualquiera que visite el sitio sin CSS o Imágenes habilitadas (como, tal vez, un usuario móvil que busca el enlace a su sitio optimizado para dispositivos móviles). Ninguno de ellos sabrá sobre esos tres enlaces porque no tienen texto. Si las imágenes están apagadas, el usuario ni siquiera verá el texto alternativo para describir lo que habría estado allí porque es una imagen de fondo.

    Mejor sería cortar las imágenes, vincularlas, ponerlas en una lista y ponerlas una al lado de la otra. O incluso use texto para los enlaces y reemplace el texto usando una técnica estándar de reemplazo de imágenes. Esto parece conveniente, pero hace las cosas mucho más difíciles / imposibles para quienes no utilizan un navegador gráfico estándar.

    • 2
      • 3

        Doug

        JAWS no lee los títulos de los enlaces de forma predeterminada, pero tienes razón, puede hacerlo. Sin embargo, ¿por qué buscarías títulos de enlaces si no supieras que están allí, e incluso si lo estuvieras, seguramente esto se reduce a un problema de usabilidad, lo que significa que estás brindando a los usuarios con menos capacidades una experiencia de segunda categoría al usar tu sitio?

        Para los navegadores de texto, el artículo que me indica que Lynx también le permite mostrar una lista de títulos de enlaces, pero mi punto es que si no sabía que había un enlace allí, ya que no había texto en primer lugar. , ¿por qué buscarías el texto del título?

        Finalmente, los atributos del título del enlace aún no aparecerán para nadie que navegue sin imágenes habilitadas o sin CSS habilitado.

        Entonces sí, los enlaces con títulos son mejores que los que no tienen, pero en este caso es solo marginal.

        Es por eso que usar una imagen, para que se pueda leer el texto alternativo, o reemplazar la imagen, para que el texto esté ahí, es una opción mucho más segura, más accesible y más utilizable.

        • 4

          Buena información, Phil. Intentaré mejorar esto con texto, pero simplemente ocultaré el texto; de esa manera, un producto accesible como JAWS leerá el texto del enlace y el texto se mostrará si CSS o Imágenes están deshabilitados.

          Sin embargo, no estoy de acuerdo con que la única solución accesible sería poner una imagen con un enlace.

  2. 5
  3. 8

    Lo robé. Ahí lo dije.

    Doug, los gráficos son fantásticos y la codificación es tan increíblemente simple que me asusta (he estado jugando con CSS y ahora finalmente lo "entiendo").

    Modifiqué el código para satisfacer mis necesidades, descubrí dónde colocar el bit HTML y, francamente, se ve muy bien y ha limpiado la parte superior de mi barra lateral que me ha estado volviendo loco.

    ¡Quizás tenga que comprarte ese café todavía!

  4. 10

    Doug

    Voy a ser una voz disidente, usando mi experiencia como ejemplo. Recuerdo nuestros correos electrónicos cuando cambió mi correo electrónico de casa y notó que simplemente tenía que optar por el nuevo. Tengo que admitir que me lo pasé genial "descubriendo" la nueva función en su sitio para volver a habilitarla. Parte de esto se debió a que el enlace original era un poco más tradicional y lo recordaba vagamente. La otra fue porque el medio sobre lateral simplemente no me parecía un sobre inicialmente. Después de unos 5 minutos o más, comencé a pasar el mouse sobre cada imagen y cuando se mostró el título "Suscribirse con correo electrónico", supe que estaba en el negocio. Mi cerebro también descubrió cuál era la imagen del enlace.

    Pero, al menos para mí, un sobre lateral simplemente no era intuitivo para mí como el lugar para suscribirme a las notificaciones por correo electrónico. Y (porque me dijeron que siempre terminara con algo agradable) estoy de acuerdo con Phil arriba; el método es realmente simple y todo el artículo funciona muy bien. Supongo que su herramienta de diseño ayudó a obtener las dimensiones exactas de las 3 secciones; ¿Es esa una suposición correcta? Debo asumir que sí, ya que si tuviera, digamos, una imagen de 400 píxeles de ancho, necesitaría saber la configuración correcta, etc.

  5. 12
    • 13

      William,

      Parece que puede tener un conflicto entre los nombres de las clases de sus comentarios y los nombres de las clases en el gráfico de la barra lateral. Puede nombrarlos de manera diferente para aclarar el conflicto. ¡Avísame si necesitas una mano!

      Doug

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Buen enfoque, pero necesito algo para un mapa topográfico, así que no puedo usar áreas rectangulares ... Creo que tengo que usar el mapa de imágenes de estilo antiguo con coordenadas, pero probablemente profundizaré un poco más ...

  11. 19

    Gracias por esta información, Doug. Había estado aquí antes y me preguntaba cómo lo habías hecho. Queríamos crear un mapa como ese para insertar después de nuestras publicaciones, y ahora que tenemos los medios, podemos hacerlo. ¡Bravo!

  12. 20
  13. 21

    Hola Doug,
    Dejé un comentario anterior, pero me di cuenta de que apenas ofrecía una idea de mi dilema. Hemos estado adaptando un tema de wordpress para ayudarnos a lanzar nuestra comedia en línea aquí:

    http://www.phaylen.com/blog/

    Ahora, verá que tenemos un banner de navegación en la parte superior, una imagen que intentamos mapear como lo hemos hecho decenas de veces antes. / palmforehad. Ninguno de nosotros es realmente incomprensible con CSS, pero tropezamos lo suficiente y hasta ahora lo hemos hecho bien hasta este punto. Su artículo en el ÚNICO de las docenas que se proporcionaron son información real sobre cómo utilizar el mapeo de imágenes en CSS fácilmente. Emití la hoja de estilo de acuerdo con sus instrucciones, pero no tengo idea de dónde colocar el HTML. Todo lo que dijiste es "Agrega tu html ... Es agradable y simple" y luego me encogí porque pensé ... "¡No es lo suficientemente simple para mí!" No sabía que podía agregar html en cualquiera de estas páginas php en el editor de temas. ¿Coloco el html en el encabezado? ¿La plantilla del índice principal? ¿Las funciones? Supongo que todos los usuarios de wordpress tienen la opción de editar su tema en el editor de tablero, que parece bastante universal en funcionalidad. Si pudiera sugerir dónde colocar el html, me encantaría adaptar el código oru para mi barra de navegación.

    Gracias por compartir su conocimiento con la comunidad. Estoy feliz de traerles un café.

    • 22

      ¡Hola Phay!

      Todos los archivos del tema de tu blog están disponibles a través del panel de administración para editarlos. Si hace clic en Presentación y luego en Editor de temas, debería poder ver una lista de sus archivos a la derecha y un editor a la izquierda.

      Si desea que esto esté en su barra lateral, probablemente tenga una página de barra lateral. Haga clic para editarlo y luego coloque el HTML proporcionado dentro de la página donde le gustaría.

      Una nota: la edición de la hoja de estilo es relativa a su página, por lo que deberá cargar la imagen en el directorio de imágenes del tema si hace referencia a ella como lo haría con otras imágenes en su tema.

      Espero que ayude!

    • 23

      Phay,
      Encontré este sitio hoy y tuve el mismo dilema que tú. También quería agregar un mapa de imagen a la imagen del encabezado. Después de jugar con él por un tiempo, lo hice bien. Coloque el div HTML en el archivo header.php. Lo pongo entre y. No estoy seguro de si su plantilla tiene esa codificación exacta, pero juegue con ella en el archivo header.php y lo resolverá.
      ,
      paul

  14. 24

    ¡Gracias por la rápida respuesta!

    No, no quería que estuviera en la barra lateral, está en la parte superior de la página (puede ver en el enlace que proporcioné, la barra de navegación rosa que dice contant, sobre el programa, etc.)

    He estado trabajando en el tablero toda la mañana, desafortunadamente, no estoy seguro en qué archivo coloco el html, como se indicó anteriormente, tengo varios, header.php, main index.php, functions.php, footer.php. No estoy seguro de dónde insertar el código html. (la primera parte que proporcionó, ya he insertado el resto en mi hoja de estilo) Tengo mi imagen en el sitio web, todo está listo, solo necesito saber dónde agregar la parte html del código para adaptar.

    Muchas gracias por su tiempo y por responder las preguntas de un novato.

    Phay

  15. 25

    … O tal vez alguien podría publicar en los comentarios sobre en qué archivo colocamos la parte html del código. Un caballero en algunas publicaciones dijo que lo descubrió. No he tenido tanta suerte.

    Phaylen

  16. 26
  17. 27

    Me está costando mucho encontrar una manera de incrustar un mapa de imagen en el que se puede hacer clic en wordpress porque elimina las etiquetas de mapa html. Su camino funcionaría, pero un mapa de los EE. UU. Es obviamente demasiado complejo para manipularlo de esta manera. Estoy perdido.

    Ayuda.

    ¿Parece que flash es mi única opción?

    • 28

      Dave,

      Si pones la imagen en tu plantilla, estarás bien. Si coloca el mapa de imagen en el contenido real, podría tener problemas de filtro. La forma en que he resuelto esto es terrible, pero a veces he utilizado un iframe.

      Doug

  18. 29

    Hola,

    parece que el mapa de imagen y los enlaces son dos cosas diferentes, no funcionan juntos como lo hace un mapa de imagen en html

    cuando incluyo el posicionamiento en segundo plano (centro izquierda) para el mapa de imagen, el posicionamiento de los enlaces no sigue.

    alguna forma de evitar esto? soy muy aficionado. gracias.

  19. 31

    ¿Se usaría un enfoque similar para un mapa de imagen más grande y complicado como el que estoy tratando de usar?

    Si ve mi sitio, haga clic en los enlaces a la izquierda y verá la imagen que estoy tratando de usar como mapa de imágenes (debajo del alfabeto de texto).

    Básicamente, intentar usar la imagen para ir a cada sección de esta lista por letra.

    Evidentemente, pasé 20 minutos construyendo un mapa con GIMP, y luego WP elimina las etiquetas del mapa, así es como encontré su sitio.

    Aunque, puede contemplar el uso de Flash

    Gracias.

  20. 33

    Actualmente estoy usando un diseño de plantilla y editando con mis propias cosas. Quiero agregar un mapa de imagen, pero no estoy seguro de dónde colocarlo en el CSS. la imagen de la que quiero hacer un mapa está en la parte del encabezado.

  21. 34

    hola, construí mi sitio web en joomla… quiero usar este método para hacer que el logo de mi página sea un enlace a casa, me han dicho que no puedes hacer esto con joomla, ¡pero este artículo me da esperanza! La ayuda por correo electrónico será muy apreciada… .gracias

  22. 35

    Hola Doug: estoy creando un mapa de imágenes basado en CSS bastante complejo que también tiene desplazamientos remotos (en este caso, el texto se muestra en otra parte de la página cuando pasa el mouse por uno de los puntos de acceso de imagen). De todos modos, encontré su ejemplo aquí mientras investigaba eso ... y pensé en compartir la siguiente entrada:

    1. Para la accesibilidad, no debe usar visibilidad: ninguno (o mostrar: ninguno si lo consideró) para ocultar el texto aquí, como un elemento diseñado con visibilidad: oculto no será leído por los lectores de pantalla (aquellos que siguen las especificaciones) .

    En su lugar, utilice una técnica de sustitución de imágenes más sólida. Sugiero el método Phark o Gilder / Levin; esos son solo los nombres mejor documentados para que Google encuentre las técnicas básicas. Prefiero G / L ya que también funciona con CSS habilitado pero las imágenes están apagadas.

    2. Si bien no veo que se rompa (usando FF3), su implementación de posicionamiento también tiene riesgos inherentes. Un elemento posicionado absolutamente se posiciona en relación con su padre posicionado más cercano. Básicamente, querrás establecer explícitamente un contexto de posicionamiento aplicando 'posición: relativa' a # suscripción. Luego, los hijos (los enlaces posicionados) se pueden colocar dentro de ese padre. Este método ayuda a garantizar resultados más fiables en todos los navegadores.

    Además, debe usar las declaraciones de posición de “top: x” y “left: x” (donde x es el valor de compensación, digamos en px) en lugar de los márgenes para manejar esa posición. Nuevamente, no necesariamente veo que se rompa de la forma en que lo tiene, pero la parte superior e izquierda están diseñadas para esto, así que ¿por qué no usarlas? Además, tiene flotantes y márgenes establecidos en el mismo elemento, que en condiciones específicas causan el error de "doble margen" en IE6 (¿probó esto allí?). Si bien hay una solución, evita ese problema por completo utilizando top ya la izquierda en lugar de los márgenes para el posicionamiento en este caso.

    3. Finalmente, ¿por qué no usar una lista desordenada semánticamente sólida para estos enlaces en lugar del div sin sentido?

    Perdón por seguir hablando ... Me gusta compartir, porque sé por experiencia que hay muchas formas diferentes de usar CSS para obtener el resultado deseado, pero algunas formas funcionan mejor (más confiables, entre navegadores) que otras . HTH.

  23. 36
  24. 37
  25. 38

    ¡¡Muchas gracias!! Tus instrucciones me ahorraron HORAS de trabajo ... Soy nuevo en el desarrollo web, y acabo de sufrir durante mi primer gran proyecto. Lo logré ... el cliente está feliz, extasiado en realidad, ¡y yo también!

  26. 39

    Hola, muchas gracias por publicar esto. Años después y todavía está ayudando ... ¡agradable! Estoy luchando para que mi mapa de imágenes se vincule en el lugar correcto. Tengo un banner y quiero que los íconos sociales en la parte superior derecha del banner se vinculen usando el código que usted proporcionó. Funciona muy bien, excepto que estoy haciendo algo mal porque mis enlaces aparecen en el extremo superior izquierdo de la pantalla, no sobre los íconos sociales, sino sobre el logotipo. Estoy seguro de que es algo simple, pero no puedo entenderlo. Pensé en compartirlo aquí en caso de que tenga alguna idea. ¡Gracias de nuevo por publicar esto!

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.