Meta tags:
description=O atributo coords do HTML especifica as coordenadas de uma área no mapa de imagem. Leia sobre essa propriedade e veja um exemplo de uso no elemento area .;

Headings (most frequently used words):

do, atributo, coords, html, como, funciona, sistema, de, coordenadas, valores, sintaxe, uma, nota, sobre, acessibilidade, atributos, tags, relacionados, prática, exemplos,

Text of the page (most frequently used words):
html (58), #coords (29), imagem (19), svg (19), atributo (18), aprender (15), area (15), shape (14), para (13), uma (10), coordenadas (10), alt (9), canvas (9), tags (8), rect (8), w3docs (7), css (7), circle (7), atributos (6), poly (6), valor (6), com (6), todos (5), sobre (5), como (5), depende (5), mapa (5), que (5), map (5), sempre (5), introdução (5), html5 (5), formatter (5), color (5), code (4), generator (4), prática (4), php (4), default (4), são (4), usa (4), radius (4), não (4), elemento (4), lado (4), qual (4), tamanho (4), href (4), 150 (4), media (4), title (4), canto (4), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), javascript (3), nota (3), valores (3), funciona (3), formato (3), forma (3), usado (3), hotspot (3), cliente (3), ele (3), texto (3), cada (3), área (3), elementos (3), mapas (3), significado (3), body (3), uploads (3), 0001 (3), height (3), 250 (3), width (3), the (3), head (3), retângulo (3), imagens (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), relacionados (2), acessibilidade (2), sintaxe (2), sistema (2), this (2), page (2), disabled (2), controls (2), lista (2), pontos (2), função (2), utilizado (2), define (2), hotspots (2), acessíveis (2), teclado (2), preciso (2), renderizada (2), diferente (2), melhor (2), links (2), fixo (2), tem (2), você (2), mesmo (2), copiar (2), https (2), www (2), book_gallery (2), png (2), center (2), blockmap (2), img (2), logo (2), doctype (2), exemplo (2), pixels (2), superior (2), esquerdo (2), inferior (2), direito (2), medidas (2), layout (2), por (2), portanto (2), aumenta (2), círculo (2), accept (2), dir (2), formulários (2), referência (2), tutorial (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, válidos, independente, tag, determina, cor, definir, região, acessível, definido, agrupa, técnica, legada, apresentam, ressalvas, reais, nem, pelo, confiável, seu, quebram, redimensionada, escala, maioria, das, interfaces, modernas, posicionar, botões, individualmente, estilizados, focalizáveis, permanecem, responsivos, use, apenas, quando, realmente, precisar, regiões, clicáveis, irregulares, única, raster, forneça, significativo, único, leitor, tela, aquele, experimente, 230, 190, 140, triangle, joining, three, points, top, left, then, bottom, right, 25521e981b34da57c8f51baddc5b76351b855818, 195, d450f0358f947dffb3af91195c3002600d74101b, and, name, usemap, block, news_gallery, thumb_316_news_gallery_list, jpeg, src, click, one, item, watch, closer, document, abaixo, dois, mesma, erro, comum, fornecer, cantos, ordem, errada, inválido, porque, escrito, corretamente, esse, inteira, recebe, nenhum, vértice, navegador, fecha, automaticamente, unindo, último, ponto, primeiro, centro, necessário, inteiramente, estão, vinculadas, renderizado, foram, dimensionar, responsivo, zoom, deixarão, alinhar, isso, funcionam, está, coordenada, válida, máxima, aproximadamente, baixo, direita, origem, relação, interpretado, acordo, mesmos, números, significam, coisas, diferentes, polígono, devem, ser, definidos, juntos, clicável, dentro, especifica, leia, essa, propriedade, veja, uso, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, contenteditable, content, async, attribute, reference, forms, vídeos, youtube, multimídia, class, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, text, path, polyline, polygon, linha, elipse, gradientes, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, style, strong, strike, span, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, main, link, legend, label, keygen, kbd, isindex, ins, input, iframe, hgroup, header, frameset, frame, form, footer, font, figure, figcaption, fieldset, embed, div, dialog, dfn, details, del, datalist, data, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, applet, address, acronym, abbr, evento, globais, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, navegadores, áudio, vídeo, semânticos, computercode, caminhos, arquivo, estilos, scripts, blocos, tabelas, comentários, cores, listas, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
atributo coords do html w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset atributo coords do html o atributo coords do html especifica as coordenadas de uma área no mapa de imagem leia sobre essa propriedade e veja um exemplo de uso no elemento area o atributo html coords define as coordenadas de uma área clicável um hotspot em um mapa de imagem do lado do cliente é usado no elemento area dentro de um map o valor de coords não tem significado por si só ele é sempre interpretado de acordo com o atributo shape no mesmo area os mesmos números significam coisas diferentes para um retângulo um círculo ou um polígono portanto coords e shape devem ser sempre definidos juntos como funciona o sistema de coordenadas as coordenadas são medidas em pixels css em relação à imagem renderizada a origem 0 0 é o canto superior esquerdo da imagem x aumenta para a direita y aumenta para baixo o canto inferior direito da imagem está em width height portanto para uma imagem de 250 150 a coordenada válida máxima é aproximadamente 250 150 como as coordenadas estão vinculadas ao tamanho renderizado um mapa de imagem só é preciso no tamanho para o qual as coordenadas foram medidas se você dimensionar a imagem com css um width height diferente um layout responsivo ou zoom os hotspots deixarão de se alinhar com a imagem por isso os mapas de imagem funcionam melhor em imagens de tamanho fixo valores o formato de coords depende inteiramente do shape valor de shape formato de coords significado rect x1 y1 x2 y2 canto superior esquerdo x1 y1 e canto inferior direito x2 y2 é necessário que x1 x2 e y1 y2 circle x y radius centro x y e o radius em pixels poly x1 y1 x2 y2 xn yn uma lista de pontos de vértice o navegador fecha automaticamente a forma unindo o último ponto ao primeiro default nenhum a imagem inteira default é um valor de shape não de coords um area shape default não recebe coords um erro comum é fornecer os cantos de rect na ordem errada coords 90 90 35 55 é inválido porque x1 x2 e y1 y2 escrito corretamente esse retângulo é coords 35 55 90 90 sintaxe area shape rect coords x1 y1 x2 y2 copiar exemplos do atributo coords do html o exemplo abaixo usa um rect dois circle s e um poly na mesma imagem doctype html html head title title of the document title head body p click on the logo or on one of the logo item to watch it closer p img src uploads media news_gallery 0001 01 thumb_316_news_gallery_list jpeg width 250 height 150 alt block usemap blockmap map name blockmap circle center x y and radius area shape circle coords 50 32 25 alt html href uploads media book_gallery 0001 01 d450f0358f947dffb3af91195c3002600d74101b png area shape circle coords 195 32 28 alt css href uploads media book_gallery 0001 01 25521e981b34da57c8f51baddc5b76351b855818 png rect top left x1 y1 then bottom right x2 y2 x1 x2 y1 y2 area shape rect coords 35 55 90 90 alt php href https www w3docs com poly a triangle joining three points area shape poly coords 150 80 230 80 190 140 alt js href https www w3docs com map body html copiar experimente você mesmo nota sempre forneça a cada area um valor alt significativo é o único texto que um leitor de tela tem para aquele hotspot uma nota sobre acessibilidade os mapas de imagem do lado do cliente são uma técnica legada e apresentam ressalvas reais os hotspots nem sempre são acessíveis pelo teclado de forma confiável seu significado depende de um alt preciso para cada area e as coordenadas se quebram sempre que a imagem é redimensionada ou renderizada em uma escala diferente para a maioria das interfaces modernas é melhor posicionar links ou botões individualmente estilizados e focalizáveis sobre ou ao lado de a imagem que permanecem acessíveis e responsivos use coords e mapas de imagem apenas quando realmente precisar de regiões clicáveis irregulares em uma única imagem raster de tamanho fixo atributos e tags relacionados map define o mapa de imagem que agrupa os elementos area area o elemento no qual coords é definido atributo alt o texto acessível para cada área prática prática qual é a função do atributo coords no html e como ele é utilizado qual é a função do atributo coords no html e como ele é utilizado o atributo coords no html é usado para definir as coordenadas da região de hotspot em um mapa de imagem do lado do cliente o atributo coords no html determina a cor de um elemento é usado com a tag area e o valor do atributo coords depende do atributo shape o atributo coords funciona de forma independente e não depende do atributo shape o formato do valor coords depende do shape rect usa x1 y1 x2 y2 circle usa x y radius e poly usa uma lista de pontos circle rect poly e default são todos valores válidos do atributo coords verificar was this page helpful yes no previous controls next disabled on this page como funciona o sistema de coordenadas valores sintaxe uma nota sobre acessibilidade atributos e tags relacionados prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores