Mapa de imagen

Dr Johnson - Dictionary writerBoswell - BiographerSir Joshua Reynolds - HostDavid Garrick - actorEdmund Burke - statesmanPasqual Paoli - Corsican patriotCharles Burney - music historianThomas Warton - poet laureateOliver Goldsmith - writerprob.The Infant Academy 1782unknown paintingAn unknown portraitservant - poss. Francis BarberUse button to enlarge or use hyperlinks
Mapa de imagen. Al hacer clic en una persona en la imagen, el navegador carga el artículo correspondiente. Nótese que el código de este ejemplo NO es en HTML sino que está escrito en el lenguaje Wiki.

En HTML y XHTML, un mapa de imagen es una lista de coordenadas relacionadas con una Imagen específica, creada para hipervincular áreas de la imagen a diferentes destinos (a diferencia de un enlace de imagen normal, en el que toda el área de la imagen se vincula a un solo destino). Por ejemplo, un mapa del mundo puede tener un hipervínculo de cada país para obtener más información sobre ese país. La intención de un mapa de imagen es proporcionar una manera fácil de vincular varias partes de una imagen sin dividir la imagen en archivos de imagen separados.

Lado del servidor

Los mapas de imagen del lado del servidor se soportaron por primera vez en Mosaic (navegador web) versión 1.1.[1]​ Las asignaciones de imágenes del lado del servidor permiten que el navegador web envíe información posicional al servidor sobre dónde hace clic el usuario dentro de una imagen. Esto le permite al servidor tomar decisiones píxel a píxel sobre qué contenido devolver en respuesta (los métodos posibles son usar capas de máscara de imagen, consultas de bases de datos o archivos de configuración en el servidor).

El código HTML para este tipo de mapa de imagen del lado del servidor requiere que la etiqueta <img> esté dentro de una etiqueta de anclaje <a>...</a> y la <img> debe incluir el atributo ismap. Cuando el usuario hace clic dentro de la imagen, el navegador agregará las coordenadas X e Y (relativas a la esquina superior izquierda de la imagen) a la URL del ancla como cadena de consulta y accederá a la URL resultante (por ejemplo,[2]/imagemapper?3,9).

Si el navegador no es compatible con ismap, la cadena de consulta no se debe agregar a la URL de anclaje y el servidor debe responder adecuadamente (por ejemplo, devolviendo una página de navegación de solo texto).

Lado del cliente

Los mapas de imagen del lado del cliente se introdujeron en HTML 3.2, y no requieren ninguna lógica especial para ser ejecutados en el servidor (son completamente del lado del cliente). Tampoco requieren ningún JavaScript.

HTML puro

Un mapa de imagen del lado del cliente en HTML consta de dos partes:

  1. La imagen real, que está incrustada con la etiqueta <img>. La etiqueta de imagen debe tener un atributo usemap, que nombra el mapa de imagen que se utilizará para esta imagen (pueden existir múltiples mapas de imagen en una sola página).
  2. Un elemento <map> , y dentro de ese, elementos <area>, cada uno de los cuales define un solo área seleccionable dentro del mapa de imagen. Estos son similares a la  etiqueta <a> que define qué URL debe abrirse para un enlace web ordinario. Se puede proporcionar un atributo de title, que se puede representar como información sobre herramientas si un usuario de escritorio coloca el puntero del mouse sobre el área. Por motivos de accesibilidad web, a menudo es importante, y en algunos casos puede ser incluso un requisito legal o contractual, proporcionar un atributo alt que describa el enlace que el software lector de pantalla puede leer, por ejemplo, los usuarios ciegos.[3]

Los elementos <area> pueden ser rectángulos (shape="rect"), polígonos (shape="poly") o círculos (shape="circle"). Los Shape-Values son pares de coordenadas. Cada par tiene un valor X e Y (desde la izquierda/parte superior de una imagen) y está separado por una coma.

  • Rectángulo: establece cuatro coordenadas: x1, y1, x2, y2
  • Polígono: establezca tantas coordenadas como desee (un múltiplo de dos): x1, y1, x2, y2, [...] xn, yn
  • Círculo: un par de coordenadas y otro valor con un radio: x1, y1, radio

El siguiente ejemplo define un área rectangular (9,372,66,397). Cuando un usuario hace clic en cualquier lugar dentro de esta área, se llevan a la página de inicio de la Wikipedia en inglés.

<imagemap>
File:image.png|thumb|center|400px|alt=Texto alternativo|Ejemplo ImageMap. Clikear sobre una zona envía al enlace correspondiente.
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

Wiki

Para los proyectos Wikipedia existe un lenguaje que se adapta al estilo del código de las páginas de Wikipedia. Su sintaxis es similar a HTML, pero más simple.

<imagemap>File:JoshuaReynoldsParty.jpg|Mapa de imagen ...|350px|thumb
...
rect 286 87 376 191 [[Joshua Reynolds|Pintor desconocido]]
circle 100 141 20 [[Joshua Reynolds|Retrato desconocido]]
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 [[Francis Barber|Posiblemente el ...]]
...
default [[Main Page|Go to main page]]
</imagemap>

CSS

Un enfoque más moderno es superponer enlaces en una imagen usando CSS de posicionamiento absoluto; sin embargo, esto solo admite áreas rectangulares seleccionables. Esta técnica de CSS puede ser adecuada para hacer que un mapa de imagen funcione correctamente en iPhones, lo cual puede no reescalar mapas de imágenes HTML puros correctamente.

Creación y uso

Es posible crear mapas de imágenes del lado del cliente a mano usando un editor de texto, pero para ello los diseñadores web deben saber cómo codificar HTML y cómo enumerar las coordenadas de las áreas que desean colocar sobre la imagen. Como resultado, la mayoría de los mapas de imágenes codificados a mano son polígonos simples.

Debido a que la creación de mapas de imágenes en un editor de texto requiere mucho tiempo y esfuerzo, muchas aplicaciones se han diseñado para permitir a los diseñadores web crear mapas de imágenes de forma rápida y sencilla, del mismo modo que crearían formas en un editor de gráficos vectoriales. Algunos ejemplos de estas aplicaciones son Adobe Dreamweaver o KImageMapEditor (para KDE) y el complemento de mapa de imágenes que se encuentra en GIMP.

Los mapas de imágenes que no hacen que sus áreas clicables sean obvias corren el riesgo de someter al usuario a una mystery meat navigation. Incluso cuando lo hacen, a dónde conducen puede no ser obvio. Esto se puede remediar parcialmente con efectos de renovación.[4]

Véase también

Referencias

Read other articles:

Artikel ini sebatang kara, artinya tidak ada artikel lain yang memiliki pranala balik ke halaman ini.Bantulah menambah pranala ke artikel ini dari artikel yang berhubungan atau coba peralatan pencari pranala.Tag ini diberikan pada Desember 2022. MaëlleMaëlle PistoiaMaëlle, 2019.Informasi latar belakangLahir04 Januari 2001 (umur 23)Tournus, PrancisPekerjaanPenyanyiLabelMercury Music Group (Universal Music France) Maëlle Pistoia (lahir 4 Januari 2001) lebih dikenal sebagai Maëlle adal...

 

فرانسيسكو فيريرا معلومات شخصية الميلاد 29 يناير 1794(1794-01-29)كوماياغوا  الوفاة 10 أبريل 1851 (57 سنة)تشالاتنانغو  [لغات أخرى]‏  مواطنة هندوراس  مناصب رئيس هندوراس   في المنصب1 يناير 1841  – 31 ديسمبر 1842  فرانسيسكو زيلايا    رئيس هندوراس   في المنصب23 فبراير 1...

 

Men in Black 3Poster filmSutradaraBarry SonnenfeldProduserWalter F. ParkesLaurie MacDonaldDitulis olehEtan CohenBerdasarkanThe Men in Blackoleh Lowell CunninghamPemeranWill SmithTommy Lee JonesJosh BrolinJemaine ClementMichael StuhlbargEmma ThompsonPenata musikDanny ElfmanSinematograferBill PopePenyuntingDon ZimmermanPerusahaanproduksiAmblin EntertainmentP+M Image NationHemisphere Media CapitalDistributorColumbia PicturesTanggal rilis 24 Mei 2012 (2012-05-24) (Indonesia) 25 Mei...

Bulbophyllum andreeae Klasifikasi ilmiah Kerajaan: Plantae (tanpa takson): Angiospermae (tanpa takson): Monocots Ordo: Asparagales Famili: Orchidaceae Genus: Bulbophyllum Spesies: Bulbophyllum andreeae Nama binomial Bulbophyllum andreeaeA.D.Hawkes 1956 Bulbophyllum andreeae adalah spesies tumbuhan yang tergolong ke dalam famili Orchidaceae. Spesies ini juga merupakan bagian dari ordo Asparagales. Spesies Bulbophyllum andreeae sendiri merupakan bagian dari genus Bulbophyllum.[1] Nama ...

 

PausKlemens VIAwal masa kepausan7 Mei 1342Akhir masa kepausan6 Desember 1352PendahuluBenediktus XIIPenerusInosensius VIInformasi pribadiNama lahirPierre RogerLahir1291Rosiers-d'Égletons, Limousin, PrancisWafat6 Desember 1352Avignon, Prancis Klemens VI, nama lahir Pierre Roger (Rosiers-d'Égletons, Limousin, Prancis, 1291 – Avignon, Prancis, 6 Desember 1352), adalah Paus Gereja Katolik Roma sejak 7 Mei 1342 sampai 6 Desember 1352. lbs Paus Gereja Katolik Daftar paus grafik masa jabatan oran...

 

Map of the United States with Maryland highlighted Maryland is a state located in the Southern United States.[1] According to the 2020 United States Census, Maryland is the 18th most populous state with 6,177,224 inhabitants and the 9th smallest by land area spanning 9,707.24 square miles (25,141.6 km2) of land.[2] The state is divided into 23 counties and contains 157 municipalities consisting of cities, towns, or villages.[3] Its municipalities cover only 4.4% ...

This article is about the Georgian franchise of the Idol series. For the satellite communications system that operated in the 1980s, see GEOStar. This article needs to be updated. Please help update this article to reflect recent events or newly available information. (December 2022) Georgian TV series or program GeostarLogo of Geostar 2008Created bySimon FullerCountry of originGeorgiaOriginal releaseNetworkRustavi 2Release2006 (2006) –31 December 2011 (2011-12-31) Geostari (...

 

Frankfurt Fairground (IAA 2007) Internationale Automobil-Ausstellung (IAA, Indonesia: Pameran Mobil Internasional), juga dikenal sebagai Frankfurt Motor Show atau Frankfurt Auto Show, adalah salah satu pameran otomotif terbesar di dunia. Diselenggarakan 2 tahun sekali di Frankfurt, Germany. Pameran IAA diorganisir oleh Asosiasi Industri Otomotif Jerman (VDA). Sejak tahun 1991, penyelenggaraannya dipecah menjadi 2 bagian: Pameran pada tahun genap diselenggarakan di Hanover untuk kendaraan kome...

 

George CruikshankGeorge Cruikshank, 1836Lahir(1792-09-27)27 September 1792London, InggrisMeninggal1 Februari 1878(1878-02-01) (umur 85)London, InggrisKebangsaanBritaniaDikenal atasKartunis (Karikaturis), Sastra Anak-Anak George Cruikshank (27 September 1792 – 1 Februari 1878) adalah seorang karikaturis dan ilustrator buku Britania, dijuluki sebagai Hogarth modern semasa hidupnya. Kehidupan awal Cruikshank lahir di London. Bacaan tambahan Cruikshank, George. (1980). Graphic Works of Ge...

American animated television series For the original 1984 series, see Muppet Babies (1984 TV series). Muppet BabiesAlso known asDisney Junior's Muppet BabiesGenre Musical Fantasy Comedy Preschool Family Educational Based on Muppet Babiesby Jeffrey Scott The Muppetsby Jim Henson Developed by Mr. Warburton Chris Hamilton Directed by Guy Moore Jeremy Jensen Collette Sunderman (dialogue director) Voices of Matt Danner Melanie Harrison Dee Bradley Baker Benjamin Diskin Eric Bauza Jessica DiCicco J...

 

Japanese manga and anime series My First Girlfriend Is a GalCover of the first tankōbon volume featuring Junichi Hashiba (left) and Yukana Yame (center)はじめてのギャル(Hajimete no Gyaru)GenreHarem[1]Romantic comedy[2]Slice of life[1] MangaWritten byMeguru UenoPublished byKadokawa ShotenMagazineMonthly Shōnen AceDemographicShōnenOriginal runNovember 26, 2015 – presentVolumes18 (List of volumes) Anime television seriesDirected byHiroyuki Furu...

 

Swedish multinational manufacturing company This article is about the Volvo Group (AB Volvo). For the separate manufacturer of passenger automobiles, see Volvo Cars. For other uses, see Volvo (disambiguation). AB VolvoCompany typeAktiebolagTraded asNasdaq Stockholm: VOLV A, Nasdaq Stockholm: VOLV BISINSE0000115446IndustryAutomotiveFounded1927; 97 years ago (1927)FoundersAssar Gabrielsson and Gustav LarsonHeadquartersGothenburg, SwedenArea servedWorldwideKey peopleC...

Hall of fame for American motorsports personalities 29°11′8″N 81°4′10″W / 29.18556°N 81.06944°W / 29.18556; -81.06944 The Motorsports Hall of Fame of America (MSHFA) is hall of fame that honors motorsports competitors and contributors from the United States from all disciplines, with categories for Open Wheel, Stock Cars, Powerboats, Drag Racing, Motorcycles, Sports Cars, Aviation, At Large, Off-Road and Historic. Periodic recognition is given to specialty ...

 

Part of a series onTamils History History of Tamil Nadu History of Sri Lanka Sources of ancient Tamil history Sangam period Keezhadi excavation site Tamilakam Agriculture Economy Education Industry Chronology of Tamil history Eelam Tamil Kingdoms Tamilization Culture Language Literature Philosophy Script Numeral system Medicine Music Architecture Cuisine Calendar Cinema People Indian Tamils Sri Lankan Tamils Malaysian Tamils Singapore Tamils Tamil diaspora Indian Tamil diaspora Sri Lankan Tam...

 

Not to be confused with Incitatus, Roman Emperor Caligula's horse.Irish-bred Thoroughbred racehorse CaligulaCaligula in 1920.SireThe TetrarchGrandsireRoi HerodeDamSnootDamsireParigordSexStallionFoaled1917[1]CountryIrelandColourGreyBreederJames J MaherOwnerSeymour Edward Frederick Egerton, 6th Earl of WiltonMathradas GoculdasTrainerHarvey LeaderRecord9: 3-1-1Earnings£7,941[2]Major winsAscot Derby (1920)St Leger (1920) Caligula (1917 – after 1936) was an Irish-bred Britis...

EdrophoniumClinical dataTrade namesTensilonAHFS/Drugs.comFDA Professional Drug InformationATC codeV04CX07 (WHO) Identifiers IUPAC name N-Ethyl-3-hydroxy-N,N-dimethylbenzenaminium CAS Number312-48-1 NPubChem CID8307DrugBankDB01010 YChemSpider8006 YUNII70FP3JLY7NKEGGD00994 YChEBICHEBI:4759 YChEMBLChEMBL1128 YCompTox Dashboard (EPA)DTXSID4046943 Chemical and physical dataFormulaC10H16NO+Molar mass166.244 g·mol−13D model (JSmol)Interactive image SMI...

 

  لمعانٍ أخرى، طالع ويل رايت (توضيح). هذه المقالة يتيمة إذ تصل إليها مقالات أخرى قليلة جدًا. فضلًا، ساعد بإضافة وصلة إليها في مقالات متعلقة بها. (يوليو 2019) ويل رايت معلومات شخصية الميلاد 4 يوليو 1973 (51 سنة)  الجنسية المملكة المتحدة  الحياة العملية المهنة دراج  نوع ال...

 

Atticus Mitchell Atticus Mitchell en 2017Información personalNombre de nacimiento Atticus Dean MitchellNacimiento 16 de mayo de 1993 (31 años)[1]​Toronto, Ontario, Canadá CanadáNacionalidad CanadienseCaracterísticas físicasAltura 1,83 m (6′ 0″)Información profesionalOcupación Actor, bateristaAños activo 2009-presenteRol debut Carlos Martinelli en How to Be Indie (2009)[editar datos en Wikidata] Atticus Dean Mitchell (Toronto, 16 de mayo de 1993) es un ac...

Bon JoviAlbum studio karya Bon JoviDirilis21 Januari, 1984Direkam1982–1983StudioAvatar Studios (New York City, New York)Genre Hard rock glam metal Durasi38:33Label MercuryUS Vertigo EU Produser Tony Bongiovi Lance Quinn Kronologi Bon Jovi Bon Jovi(1984) 7800° Fahrenheit(1985) Singel dalam album Bon Jovi RunawayDirilis: Februari 1984 She Don't Know MeDirilis: 22 Mei 1984 Burning for LoveDirilis: 17 Oktober 1984 Album pertama grup musik rock, Bon Jovi dinamai Bon Jovi. Album ini dirilis ...

 

This article does not cite any sources. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed.Find sources: Zoosafari Fasanolandia – news · newspapers · books · scholar · JSTOR (June 2017) (Learn how and when to remove this message) Zoo in Fasano, Italy Zoosafari FasanolandiaView of the park40°50′01″N 17°20′19″E / 40.8335°N 17.3386°E / 40.8335; 17.3...