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 nos que iso é imprescindible. Notei que a gran imaxe de RSS nos Geeks son 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 que visite o sitio sen CSS ou Imaxes habilitadas (por exemplo, quizais un usuario móbil que busque a ligazón ao seu sitio amigable para móbiles). Ningún deles saberá esas tres ligazóns porque non teñen texto. Se as imaxes están desactivadas, o usuario nin sequera verá texto alternativo para describir o que habería alí porque é unha imaxe de fondo.

    Mellor sería cortar as imaxes, enlazalas, colocalas nunha lista e flotalas unhas ao lado das outras. Ou incluso usa texto para as ligazóns e substitúe o texto usando unha técnica estándar de substitución de imaxes. Parece conveniente, pero fai as cousas moito máis difíciles / imposibles para aqueles que non empregan 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 estaba alí e, aínda que o estiveses, seguramente isto cae nun problema de usabilidade, o que significa que estás dando aos usuarios menos capacitados unha segunda experiencia de uso do teu sitio.

        Para os navegadores de texto, o artigo que me orientas cara a Lynx tamén che permite mostrar 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. , por que buscarías o texto do título?

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

        Entón si, as ligazóns con títulos son mellores que as que non o teñen, pero neste caso só é marxinal.

        É por iso que o uso dunha 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 intentar melloralo con texto, pero simplemente ocultalo, dese xeito un produto accesible como JAWS lerá o texto da ligazón e o texto amosarase se CSS ou Imaxes están desactivadas.

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

  2. 5
  3. 8

    Eu roubeino. Alí, dixenllo.

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

    Axustou o código para satisfacer as miñas necesidades, descubrín onde introducir o bit HTML e, francamente, ten un aspecto estupendo e limpou a parte superior da miña barra lateral que me levou ENSÁN.

    É posible que teña que mercar ese café.

  4. 10

    Doug,

    Vou ser unha voz discrepante, tomando como exemplo a miña experiencia. Lembro os nosos correos electrónicos cando o meu correo electrónico de casa cambiou e observou que tiña que optar polo novo. Teño que recoñecer que pasei o tempo "descubrindo" a nova función do teu sitio para volver a participar. Parte diso foi porque o enlace orixinal era un pouco máis tradicional e lembreino vagamente. A outra foi porque o medio sobre lateral non me parecía inicialmente un sobre. Despois de aproximadamente 5 minutos ou máis, comecei a pasar o rato por riba de cada imaxe e cando aparecía o título "Subscribirse con correo electrónico", entón souben que estaba na empresa. O meu cerebro tamén descubriu cal era a imaxe da ligazón.

    Pero, polo menos para min, un sobre lateral non me resultou intuitivo como o lugar para subscribirse ás notificacións por correo electrónico. E (porque me dixeron que acabara sempre con algo agradable) estou de acordo con Phil máis arriba; o método é moi sinxelo e todo o elemento funciona moi ben. Eu considero que a súa ferramenta de deseño axudou a darlle as dimensións exactas para as 3 seccións; é unha suposición correcta? Teño que asumilo, xa que se tivese, por exemplo, unha imaxe de 400 píxeles, tería que coñecer a configuración correcta, etc.

  5. 12
    • 13

      William,

      Parece que pode ter un conflito entre os nomes das clases de comentarios e os nomes das clases na gráfica da barra lateral. Podes nomealos de xeito diferente para aclarar o conflito. Avísame se precisas unha man.

      Doug

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

    Unha boa aproximación, pero necesito algo para un mapa topográfico, polo que non podo usar áreas de rectángulo ... Creo que teño que empregar o mapa de imaxes de estilo antigo con coordenadas, pero probablemente cavarei un pouco máis ...

  11. 19

    Grazas por esta información, Doug. Xa estivera aquí antes e pregunteime 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 deime conta de que case non ofrecía ningunha información sobre o meu dilema. Estivemos adaptando un tema de wordpress para axudarnos a lanzar a nosa sitcom en liña aquí:

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

    Agora verás que temos unha pancarta de navegación pola parte superior, unha imaxe que pretendiamos cartografar como xa levamos decenas de veces. / palmforehad. Ningún de nós realmente entende o CSS, pero tropezamos de xeito suficiente e ata agora fixémolo ben ata este punto. O seu artigo, o ÚNICO de cada ducias que proporcionou, é unha idea real sobre como utilizar o mapeo de imaxes en CSS facilmente. Mirei a folla de estilo segundo as túas indicacións, pero non teño nin idea de onde colocar o HTML. O único que dixeches é "Engade o teu html ... É simpático e simpático" e logo me sentín arruinado porque pensei .. "¡Non é o suficientemente sinxelo para min!" Non sabía que podería engadir html a ningunha destas páxinas PHP no editor de temas. Poño o html na cabeceira? O modelo de í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, o que parece bastante universal en canto a funcionalidade. Se puidese 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 conseguirche 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 a súa edición. Se fai clic en Presentación e despois no Editor de temas, debería poder ver unha lista dos seus ficheiros á dereita e un editor á esquerda.

      Se desexa que isto estea na súa barra lateral, probablemente terá unha páxina da Barra lateral. Fai clic para editalo e logo coloca o código HTML fornecido na páxina onde o desexes.

      Unha nota: a edición da folla de estilo é relativa á túa páxina, polo que terás que subir a imaxe ao directorio de imaxes do tema se o fas como se farían outras imaxes do teu tema.

      ¡Espero que me axude!

    • 23

      Phay,
      Hoxe atopei este sitio e tiven o mesmo dilema ca ti. Tamén quería engadir un mapa de imaxes á imaxe de cabeceira. Despois de xogar con el por un tempo, acerteino. Insira o div HTML no ficheiro header.php. Póñoo entre e. Non estou seguro de se o seu modelo ten esa codificación exacta, pero xogue con el no ficheiro header.php e descubrirao.
      -
      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 fornecín, a barra de navegación rosa que di contant, sobre o programa ect ..)

    Estiven toda a mañá traballando no panel de control, por desgraza, non estou seguro de en que ficheiro coloque o html, como se indicou anteriormente, teño varios, header.php, index.php principal, 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 na páxina web, todo está listo para funcionar, só necesito saber onde engadir a parte html do código para adaptarme.

    Moitas grazas polo teu tempo e as preguntas dun novato.

    Phay

  15. 25

    ... Ou quizais alguén puidese publicar nos comentarios sobre o ficheiro no que colocamos a porción html do código. Un señor que publicou uns cantos comentarios dixo que o descubriu. Non tiven tanta sorte.

    Phaylen

  16. 26
  17. 27

    Estou tendo un carallo de tempo buscando un xeito de incorporar un mapa de imaxes que pode facer clic en wordpress porque elimina as etiquetas de mapa html. O teu camiño funcionaría, pero un mapa dos Estados Unidos é obviamente un xeito complexo de atornillar con este camiño. 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, poderías ter problemas de filtrado. A forma en que traballei arredor disto é 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 á esquerda) para o mapa de imaxes, o posicionamento das ligazóns non segue.

    algún xeito de evitar isto? son moi afeccionado. grazas.

  19. 31

    ¿Empregaríase un enfoque similar para un mapa de imaxes máis grande e complicado como o que estou a intentar usar?

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

    Basicamente, intentando usar a imaxe para ir a cada sección desta lista por carta.

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

    Non obstante, pode contemplar o uso de Flash

    Grazas.

  20. 33

    Actualmente estou a usar un deseño e edición de modelos co meu material. 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, creei o meu sitio web en joomla ... quero usar este método para facer do logotipo da miña páxina unha ligazón á casa, dixéronme que non podes facelo con joomla pero este artigo dame esperanzas. A axuda por correo electrónico agradeceríase moito ... grazas

  22. 35

    Ola Doug: estou a construír un mapa de imaxes baseado en css bastante complexo que tamén ten rollovers remotos (neste caso, o texto móstrase noutros lugares da páxina cando sitúas un dos puntos de interese da imaxe). De calquera xeito, atopei o teu exemplo aquí mentres investigaba sobre iso ... e pensei en compartir a seguinte entrada:

    1. Para a accesibilidade, non debería usar a visibilidade: ningunha (nin a visualización: ningunha se o considerou) para ocultar o texto aquí, como un elemento con visibilidade: oculto non será lido polos lectores de pantalla (os que seguen as especificacións) .

    Pola contra, 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 google para atopar as técnicas básicas. Prefiro G / L porque tamén funciona con CSS habilitado pero as imaxes están desactivadas.

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

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

    3. Por último, por que non usar unha lista sen orde semanticamente desordenada para estas ligazóns en lugar do div sen sentido?

    Síntoo por droning ... só me gusta compartir, b / c sei por experiencia como hai moitas maneiras diferentes de usar CSS para obter o resultado desexado, pero certamente algunhas formas funcionan mellor (máis fiable, máis navegador) 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, extasiado, e eu tamén.

  26. 39

    Ola, moitas grazas por publicar isto. Anos despois e segue axudando ... bo! Estou loitando para que o meu mapa de imaxes se vincule no lugar axeitado. Teño un banner e quero que as iconas sociais da parte superior dereita do banner se liguen usando o código que forneceu. 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 podo entendelo. Pensei en compartilo aquí por se tes algunha información. Grazas de novo por publicar isto.

¿Que pensas?

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