Como construír un mapa de imaxes con CSS

opcións

Quería algo "friki", así que decidín por un gráfico "de peto" que conteña todos os métodos de subscrición para o meu blog.

Nos tempos da Web 1.0, podíase crear unha colección de ligazóns como esta combinando a túa imaxe con ligazóns en cada gráfico e logo intentando cosela toda de novo xunto cunha táboa. Tamén se podería lograr empregando un mapa de imaxes pero iso normalmente require unha ferramenta para construír o sistema de coordenadas. Usar follas de estilo en cascada fai que isto sexa moito máis sinxelo ... sen empalmar imaxes nin intentar atopar unha ferramenta para construír o seu sistema de coordenadas.

  1. Crea a túa imaxe que che gustaría usar. Podes empregar este gráfico a continuación (fai clic co botón dereito e garda para descargar):
    Opcións
  2. Cargue a súa imaxe a un directorio relativo ao seu CSS. En WordPress, pódese facer máis sinxelo colocándoo nunha carpeta de imaxes do seu directorio de temas.
  3. Engade o teu HTML. É bo e sinxelo ... un div con tres enlaces:
    > div id = "subscribe">> a id = "rss" href = "[a túa ligazón de feed]" title = "Subscribirte con RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[a túa ligazón de subscrición ao correo electrónico]" title = "Subscribirte con correo electrónico" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[a túa ligazón móbil]" title = "Ver versión móbil" >> span class = "hide"> Móbil> / span >> / a>> / div>
    
  4. Edite a folla de estilo en cascada. Engadirás 6 estilos diferentes. 1 estilo para a div xeral, 1 para a etiqueta a polo que non mostra ningunha decoración de texto, 1 estilo para ocultar o texto (usado para a accesibilidade) e 1 especificación de estilo para cada unha das ligazóns:
    #subscribe {/ * bloque de imaxe de fondo * / display: bloque; ancho: 215 px; altura: 60 px; fondo: url (images / options.png) sen repetir; top marxe: 0px; } #subscribe a {text-decoration: none; } .hide {visibilidade: oculto; } #rss {/ * Ligazón RSS * / float: esquerda; posición: absoluta; ancho: 50 px; altura: 50 px; marxe-esquerda: 20 px; top marxe: 5 px; } #email {/ * Ligazón de correo electrónico * / float: esquerda; posición: absoluta; ancho: 50 px; altura: 50 px; marxe-esquerda: 70px; top marxe: 5 px; } #mobile {/ * Mobile Link * / float: left; posición: absoluta; ancho: 50 px; altura: 50 px; marxe-esquerda: 130px; top marxe: 5 px; }

O posicionamento é agradable e sinxelo ... engade unha altura e ancho e logo define a marxe esquerda desde o lado esquerdo da imaxe e a marxe superior dende a parte superior da imaxe.

Esta publicación "Como facelo" é para a entrada no Os frikis son o último concurso "Como facelo"! Unha nota, é certo que un mapa de imaxes pode ter polígonos moito máis complexos, pero realmente non vin demasiados lugares onde iso é imprescindible. Notei que a gran imaxe RSS dos Geeks son a barra lateral sexy ... ese é un bo lugar para un enlace. 😉

ACTUALIZADO 10/3/2007 para unha mellor accesibilidade co asesoramento de Phil!

patrocinador: Se es un novato no deseño web, crea o teu propio sitio web do xeito correcto usando HTML e CSS, a segunda edición é imprescindible. Nesta guía fácil de seguir aprenderás a construír un sitio web do mellor xeito posible, facéndoo ti mesmo.

41 Comentarios

  1. 1

    Doug, parece un bo método, pero é moi inaccesible.

    Considere un usuario cego cun lector de pantalla, un usuario cun navegador só de texto ou calquera persoa que visite o sitio sen CSS ou imaxes habilitados (como, quizais un usuario móbil que busque a ligazón ao seu sitio adaptado para móbiles). Ningún deles saberá deses tres enlaces porque non teñen texto. Se as imaxes están desactivadas, un usuario nin sequera verá o texto alternativo para describir o que estaría alí porque é unha imaxe de fondo.

    Mellor sería cortar as imaxes, enlazalas, poñelas nunha lista e flotalas unha á beira da outra. Ou mesmo use texto para as ligazóns e substitúao mediante unha técnica estándar de substitución de imaxes. Isto parece conveniente, pero fai as cousas moito máis difíciles/imposibles para aqueles que non utilizan un navegador gráfico estándar.

    • 2
      • 3

        Doug,

        JAWS non le os títulos das ligazóns por defecto, pero tes razón, pode facelo. Por que estarías a buscar títulos de ligazóns se non sabías que estaban alí, e aínda que o estiveses, seguramente isto se reduce a un problema de usabilidade, o que significa que estás dando aos usuarios con menos capacidades unha experiencia de segunda categoría de usar o teu sitio.

        Para os navegadores de texto, o artigo que me apuntas a ese Lynx tamén che permite facer aparecer unha lista de títulos de ligazóns, pero o meu punto é que se non sabías que había unha ligazón alí, xa que non había texto en primeiro lugar. , por que buscarías o texto do título?

        Finalmente, os atributos do título da ligazón aínda non aparecerán para ninguén que navegue sen as imaxes activadas ou sen CSS activado.

        Así que si, os enlaces con títulos son mellores que os que non teñen, pero neste caso só é marxinal.

        É por iso que usar unha imaxe, para que se poida ler o texto alternativo, ou a substitución de imaxes, para que o texto estea alí, é unha opción moito máis segura, máis accesible e máis utilizable.

        • 4

          Boa información, Phil. Vou tentar mellorar isto con texto, pero simplemente ocultar o texto; así un produto accesible como JAWS lerá o texto da ligazón e o texto mostrarase se CSS ou Imaxes están desactivados.

          Non estou de acordo en que a única solución accesible sería poñer unha Imaxe cunha ligazón.

  2. 5
  3. 8

    Roubeino. Aí, díxeno.

    Doug, os gráficos son fantásticos e a codificación é tan incriblemente sinxela que me asusta (estiven xogando con CSS e agora por fin "enténdoo").

    Axustei o código para satisfacer as miñas necesidades, descubrín onde colocar o bit HTML e, francamente, ten un aspecto estupendo e limpou esa parte superior da miña barra lateral que me volveu tolo.

    Poida que teña que comprarche ese café aínda!

  4. 10

    Doug,

    Vou ser unha voz disidente, usando a miña experiencia como exemplo. Lembro os nosos correos electrónicos cando cambiou o meu correo electrónico de casa e notaches que simplemente tiña que participar co meu novo. Teño que admitir que o pasei moi ben "descubrindo" a nova función do teu sitio para optar de novo. Parte disto debeuse a que a ligazón orixinal era un pouco máis tradicional e recordaba vagamente aquela. O outro foi porque o medio sobre lateral non me parecía un sobre inicialmente. Despois duns 5 ou máis minutos comecei a pasar o rato sobre cada imaxe e cando apareceu o título "Subscríbete con correo electrónico", entón souben que estaba no negocio. O meu cerebro tamén descubriu cal era a imaxe da ligazón.

    Pero, polo menos para min, un sobre lateral non era intuitivo para min como o lugar para subscribirme ás notificacións por correo electrónico. E (porque me dixeron que rematase sempre con algo bonito) estou de acordo con Phil arriba; o método é moi sinxelo e todo o elemento funciona moi ben. Supoño que a túa ferramenta de deseño axudou a darche as dimensións exactas das 3 seccións; é esa unha suposición correcta? Teño que supoñer que si, xa que se tivese, digamos, unha imaxe de 400 píxeles de ancho necesitaría coñecer a configuración correcta, etc.

  5. 12
    • 13

      Guillermo,

      Parece que pode ter un conflito entre os nomes das clases de comentarios e os nomes das clases no gráfico da barra lateral. Podes nomealos de forma diferente para aclarar o conflito. Avísame se necesitas unha man!

      Doug

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

    Boa aproximación, pero necesito algo para un mapa topográfico, así que non podo usar áreas rectangulares... Creo que teño que usar o mapa de imaxes de estilo antigo con coordenadas, pero probablemente profundice un pouco máis...

  11. 19

    Grazas por esta información, Doug. Estivera aquí antes e preguntábame como o fixeches. Queriamos crear un mapa así para inserir despois das nosas publicacións, e agora que temos os medios, podemos facelo. Bravo!

  12. 20
  13. 21

    Ola Doug,
    Deixei un comentario anterior pero decateime de que case non ofrecía ningunha idea do meu dilema. Estivemos adaptando un tema de wordpress para axudarnos a lanzar a nosa comedia en liña aquí:

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

    Agora verás que temos un banner de navegación na parte superior, unha imaxe que pretendemos mapear como xa fixemos ducias de veces antes. /palma dianteira. Ningún de nós entende realmente CSS, pero tropezamos suficientemente e ata agora o fixemos ben ata este momento. O teu artigo no ÚNICO das ducias que proporcionaron son unha visión real sobre como utilizar facilmente o mapa de imaxes en CSS. Editei a folla de estilo segundo as túas indicacións, pero non sei onde colocar o HTML. Todo o que dixeches é "Engade o teu html... É bonito e sinxelo" e entón encobeime porque pensei... "non é o suficientemente sinxelo para min!" Non sabía que podía engadir html a calquera destas páxinas php no editor de temas. Coloco o html na cabeceira? O modelo do índice principal? As funcións? Supoño que todos os usuarios de wordpress teñen a opción de editar o seu tema no editor do panel, que parece bastante universal en funcións. Se puideses suxerir onde colocar o html, encantaríame adaptar o código oru para a miña barra de navegación.

    Grazas por compartir o teu coñecemento coa comunidade. Estou feliz de traerche un café.

    • 22

      Ola Phay!

      Todos os ficheiros do tema do teu blog están dispoñibles a través do panel de administración para editar. Se fai clic en Presentación e despois en Editor de temas, deberías poder ver unha lista dos teus ficheiros á dereita e un editor á esquerda.

      Se queres que estea na túa barra lateral, probablemente teñas unha páxina na barra lateral. Fai clic para editalo e, a continuación, coloca o HTML proporcionado na páxina onde queiras.

      Unha nota: a edición da folla de estilo é relativa á túa páxina, polo que terás que cargar a imaxe no directorio de imaxes do tema se estás facendo referencia a ela como farías con outras imaxes do teu tema.

      ¡Espero que me axude!

    • 23

      Phay,
      Atopei este sitio hoxe e tiven o mesmo dilema que ti. Tamén quería engadir un mapa de imaxes á imaxe de cabeceira. Despois de xogar con el por un tempo, acerteime. Pon o HTML div no ficheiro header.php. Púxeno entre e . Non sei se o teu modelo ten esa codificación exacta, pero xoga con el no ficheiro header.php e descubrirás.
      -
      Galicia

  14. 24

    Grazas pola rápida resposta!

    Non, non quería que estivese na barra lateral, está na parte superior da páxina (podes ver na ligazón que proporcionei: a barra de navegación rosa que di "contant", sobre o programa, etc.)

    Estiven traballando no panel toda a mañá, por desgraza, non estou seguro en que ficheiro coloque o html, como se indicou anteriormente, teño varios, header.php, main index.php, functions.php, footer.php. Non estou seguro de onde inserir o código html. (a primeira parte que proporcionaches, xa insirei o resto na miña folla de estilo) Teño a miña imaxe alí no sitio web, todo está listo para ir, só teño que saber onde engadir a parte html do código para adaptala.

    Moitas grazas polo teu tempo e as preguntas dun novato.

    Phay

  15. 25

    … Ou quizais alguén podería publicar nos comentarios sobre o ficheiro en que colocamos a parte html do código. Un cabaleiro que hai algunhas publicacións dixo que o descubriu. Non tiven tanta sorte.

    Phaylen

  16. 26
  17. 27

    Estou a pasar un inferno buscando unha forma de inserir un mapa de imaxes clicable en wordpress porque elimina as etiquetas de mapas html. O teu camiño funcionaría, pero un mapa de EE. Estou perdido.

    Axuda.

    Parece que o flash é a miña única opción?

    • 28

      Dave,

      Se colocas a imaxe no teu modelo, estarás ben. Se colocas o mapa de imaxes no contido real, podes ter problemas de filtro. A forma en que traballei con isto é terrible, pero ás veces usei un iframe.

      Doug

  18. 29

    Ola,

    Parece que o mapa de imaxes e as ligazóns son dúas cousas diferentes, non funcionan xuntos como o fai un mapa de imaxes en html

    cando inclúo o posicionamento de fondo (centro esquerdo) para o mapa de imaxes, o posicionamento das ligazóns non segue.

    algunha maneira de evitar isto? son moi afeccionado. grazas.

  19. 31

    Usaríase un enfoque similar para un mapa de imaxes máis grande e complicado como o que estou tentando usar?

    Se ves o meu sitio, fai clic nas ligazóns da esquerda e verás a imaxe que estou tentando usar como mapa de imaxes (baixo o alfabeto de texto).

    Basicamente, intentando utilizar a Imaxe para ir a cada sección desta lista por letra.

    Evidentemente, pasei 20 minutos construíndo un mapa con GIMP, e despois WP elimina as etiquetas do mapa, así que atopei o teu sitio.

    Porén, pode contemplar o uso de Flash

    Grazas.

  20. 33

    Actualmente estou usando un deseño de modelos e editando coas miñas propias cousas. Quero engadir un mapa de imaxes, pero non estou seguro de onde colocalo no css. a imaxe da que quero facer un mapa está na parte da cabeceira.

  21. 34

    Ola, construín o meu sitio web en joomla... quero usar este método para facer que o logotipo da miña páxina sexa unha ligazón á casa, dixéronme que non podes facelo con joomla, pero este artigo dáme esperanza. A axuda por correo electrónico sería moi apreciada... grazas

  22. 35

    Ola Doug: estou construíndo un mapa de imaxes baseado en CSS bastante complexo que tamén ten rollovers remotos (neste caso, o texto móstrase noutro lugar da páxina cando pasas o rato nun dos puntos de acceso de imaxes). De todos os xeitos, atopeime co teu exemplo aquí mentres investigaba iso... e pensei en compartir a seguinte entrada:

    1. Para a accesibilidade, non deberías usar visibility:none (ou display:none se o consideraches) para ocultar o texto aquí, xa que un elemento con estilo con visibility: hidden non será lido polos lectores de pantalla (os que seguen as especificacións) .

    En vez diso, use unha técnica de substitución de imaxes máis robusta. Suxiro o método Phark ou Gilder/Levin: eses son só os nomes mellor documentados para buscar en Google para atopar as técnicas básicas. Prefiro G/L xa que tamén funciona con CSS activado pero as imaxes están desactivadas.

    2. Aínda que non o vexo romper (usando FF3), a súa implementación do posicionamento tamén ten riscos inherentes. Un elemento posicionado absolutamente sitúase en relación ao seu pai máis próximo. Basicamente, quererá establecer explícitamente un contexto de posicionamento aplicando 'position:relative' a #subscription. Entón os fillos (as ligazóns posicionadas) pódense colocar dentro dese pai. Este método axuda a garantir resultados máis fiables en todos os navegadores.

    Ademais, deberías usar as declaracións de posicionamento de "arriba: x" e "esquerda: x" (onde x é o valor de compensación, digamos en px) en lugar de marxes para xestionar ese posicionamento. Unha vez máis, non vexo necesariamente que se rompa como o tes, pero a parte superior e a esquerda están pensadas para iso, entón por que non usalas? Ademais, tes flotadores e marxes definidos no mesmo elemento, que en condicións específicas provocan o erro de "marxe dobre" en IE6 (probaches isto alí?) - aínda que hai unha solución, evitas ese problema por completo usando top e deixadas en lugar de marxes para o posicionamento neste caso.

    3. Finalmente, por que non usar unha lista sen orde semántica para estas ligazóns en lugar do div sen sentido?

    Desculpe por roncar... Gústame compartir, porque sei por experiencia que hai moitas formas diferentes de usar CSS para obter o resultado desexado, pero algunhas formas certamente funcionan mellor (máis fiables, entre navegadores) que outras. . HTH.

  23. 36
  24. 37
  25. 38

    Moitas grazas!! As túas instrucións aforráronme HORAS de traballo... Son novo no desenvolvemento web e acabo de sufrir o meu primeiro gran proxecto. Fíxeno... o cliente está feliz, entusiasmado de feito, e eu tamén!

  26. 39

    Ola, moitas grazas por publicar isto! Anos máis tarde e aínda está axudando... ben! Estou loitando para que o meu mapa de imaxes se ligue no lugar correcto. Teño un banner e quero que as iconas sociais da parte superior dereita do banner se liguen mediante o código que proporcionaches. Funciona moi ben, excepto que estou facendo algo mal porque as miñas ligazóns aparecen no extremo superior esquerdo da pantalla, non sobre as iconas sociais, senón sobre o logotipo. Estou seguro de que é algo sinxelo, pero non o podo entender. Pensei en compartilo aquí por se tes algunha idea. Grazas de novo por publicar isto!

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.