HTML - Enlace imagen mapeada

Val: 33

Enlace imagen mapeada

Publicado por Marta (17 intervenciones) el 05/04/2021 13:35:18

Buenas, tengo una imagen de un país mapeado, y quiero que busquen y marquen una ciudad. Luego les aparece un mensaje de correcto o no.
En toda la imagen, he cambiado el cursor, es la imagen de ubicación de google maps.
El problema que tengo es que cuando se sitúan encima de lo que son las coordenadas correctas de la ciudad, y hacen click, no siempre aparece el mensaje correcto. Pensaba que era problema del cursor, que no sé exactamente donde apunta, pero he hecho una prueba. He puesto un enlace en la ciudad, de manera que queda marcada el área:

Imatge1

Mi pregunta es: porqué dentro del recuadro, que son justo las coordenadas seleccionadas al mapear, me aparecen los dos cursores diferentes:

Imatge2

Gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 1.453

Enlace imagen mapeada

Publicado por joel (460 intervenciones) el 06/04/2021 07:47:52

Hola Marta, no me queda muy clara tu pregunta... a que te refieres con "me aparecen los dos cursores diferentes" ?

Puedes mostrar el código para poder probarlo?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 37

Val: 33

Enlace imagen mapeada

Publicado por Marta (17 intervenciones) el 06/04/2021 08:36:40

Joel, la última imagen que he puesto, es la misma. Si me desplazo por el recuadro, que es el enlace del area de la imagen, puedes ver los dos cursores, la mano por defecto del enlace y el icono de ubicación, que lo asigno por css

Las dos últimas áreas son las que quiero tratar, he puesto un enlace para hacer la prueba, para ver que dentro de la misma área el cursor cambia. Si no pongo el enlace no verías a que me refiero. Espero haberme explicado

<div id="mapaJapo">

    <img  src="imatges/mapaDelJapo.jpg" width="838" height="826" border="0" usemap="#map" />

    <map name="map" id="mapJapo">

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="650,11,639,17,638,30,645,58,639,76,637,95,625,102,625,128,617,135,610,131,605,132,588,123,584,128,587,137,590,141,582,148,580,154,575,153,569,158,564,158,561,161,561,168,557,176,559,185,566,189,571,193,572,201,568,210,563,217,566,226,571,228,580,225,583,222,581,215,591,211,591,209,594,211,603,212,605,215,614,208,603,200,596,188,591,189,580,180,581,171,586,167,593,167,600,171,604,178,606,182,618,173,634,166,647,172,652,176,659,180,659,184,693,201,695,205,700,197,700,187,711,167,728,155,742,149,743,154,757,157,759,148,765,146,763,150,764,152,774,147,773,142,789,139,789,135,780,132,777,117,771,107,783,79,780,77,760,99,748,98,737,90,723,85,711,81,708,78" target="JapoN"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="622,229,617,234,599,223,594,244,595,247,605,245,612,241,614,246,610,255,607,259,599,253,596,254,596,258,586,260,587,252,588,246,585,240,581,241,577,239,575,237,575,243,571,245,575,250,571,263,564,263,555,272,557,278,557,280,559,286,551,304,546,305,547,311,549,312,556,312,559,325,552,343,547,362,537,377,527,395,528,400,518,412,511,413,498,423,496,430,473,451,465,452,458,459,452,457,448,460,437,461,434,469,421,468,418,462,421,457,421,455,417,452,415,449,416,444,422,445,426,442,431,441,434,433,437,433,433,430,426,429,419,434,411,434,408,441,405,444,407,453,405,466,396,479,383,490,372,501,367,507,368,512,372,521,370,525,369,520,367,521,365,524,364,526,360,525,360,528,354,528,353,532,348,532,345,530,342,527,339,529,334,525,337,519,336,515,329,516,323,519,310,518,304,518,294,519,289,522,274,522,265,521,259,518,255,520,253,520,247,520,246,514,236,514,233,516,226,517,220,518,216,519,219,525,196,538,177,553,169,554,158,561,154,565,142,565,139,562,136,563,135,565,131,565,132,577,130,577,131,582,132,587,125,589,121,587,115,589,112,589,108,590,108,594,104,597,103,601,98,602,96,598,91,597,91,602,87,605,85,608,83,600,77,602,75,610,72,605,71,608,68,605,63,615,67,621,64,635,70,645,67,652,68,655,84,643,87,647,85,652,88,655,98,648,96,641,92,639,87,640,91,634,91,627,98,625,99,632,101,640,104,647,105,649,100,653,98,655,99,659,106,657,103,661,101,665,89,681,84,679,84,674,79,676,80,679,82,681,82,684,83,688,78,699,85,708,81,718,76,717,78,730,87,728,91,733,96,733,99,730,94,722,100,708,101,714,103,721,103,728,94,743,94,744,114,736,118,730,118,724,124,722,129,730,135,722,136,716,140,702,144,688,151,676,158,669,162,660,167,659,176,652,171,645,168,642,167,636,165,635,170,631,159,629,156,630,152,626,156,624,161,623,164,614,160,606,154,605,148,611,141,606,131,596,134,593,134,588,137,587,145,590,158,589,161,590,166,588,166,590,170,591,169,593,177,594,182,598,184,604,187,595,188,592,194,580,196,584,199,582,200,588,198,591,202,590,208,592,207,586,212,586,217,582,220,582,222,580,235,580,235,578,239,578,239,581,243,581,246,575,249,576,253,575,263,578,269,579,271,575,274,573,268,572,270,571,276,573,279,573,282,571,287,566,308,566,316,577,326,573,335,574,333,586,319,595,322,598,318,603,320,607,314,611,319,616,327,629,333,639,344,641,349,643,358,631,362,622,365,619,370,611,372,609,374,604,394,601,396,606,401,600,399,590,393,587,387,585,387,579,392,565,396,559,398,563,403,560,400,567,402,579,409,584,407,573,411,578,417,579,420,580,411,583,411,588,424,585,430,584,437,587,443,585,459,590,462,593,463,587,472,574,481,567,486,564,494,569,486,573,486,579,485,585,489,592,492,593,498,588,500,581,503,576,505,573,502,567,506,560,515,555,522,557,525,560,527,565,531,564,532,561,529,557,529,552,533,546,536,542,536,541,540,538,548,539,547,545,543,551,536,557,535,557,535,562,534,566,534,574,531,577,537,578,540,578,550,568,555,569,562,567,563,558,564,550,566,542,569,542,578,539,585,537,577,528,576,521,571,513,571,505,575,496,578,484,582,477,584,472,589,471,595,450,596,434,595,423,592,413,597,403,598,395,603,397,612,394,617,399,621,400,618,384,620,377,622,367,627,365,631,360,638,352,640,347,641,330,640,318,637,306,634,295,631,285,626,279,621,273,619,264,618,253,619,240,622,232" target="Japo"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="176,624,181,628"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="211,663,202,661,202,657,205,654,198,651,192,653,195,647,191,644,194,639,198,635,196,633,193,625,192,623,176,628,189,623,202,614,210,609,213,599,218,598,226,597,229,604,237,604,250,603,255,594,251,588,255,592,263,589,268,586,278,586,285,590,287,597,295,596,295,603,295,607,296,612,298,617,292,622,280,629,277,638,274,643,272,647,267,639,263,631,254,629,250,629,239,629,234,633,232,636,232,644,226,645,221,651,219,654" target="Japo2"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="70,539,65,541,62,545,61,548,62,554,59,556,55,560,53,563,55,566,57,567,62,564,64,557,66,551,70,546,72,539" target="Japo3"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="512,583,518,591" target="Japo4"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="506,596,510,610" target="Japo5"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="521,709,525,714" target="Japo6"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="521,673,532,682" target="Japo7"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="519,632,523,638" target="Japo8"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="501,612,505,619" target="Japo9"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="514,619,521,626" target="Japo10"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="612,9,615,22,621,30,631,32,632,25,618,8" target="Japo11"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="791,126,799,123,812,121,817,119,819,124,817,129,811,134,802,138,796,138,791,135" target="Japo12"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="542,180,539,187,542,193,548,192,550,187,548,180" target="Japo13"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="484,392,476,403,476,411,475,420,489,415,493,406,492,400,488,389" target="Japo14"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="236,485,241,491,252,489,259,483,261,474,254,470" target="Japo16"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="15,637,14,643,13,648,20,648,32,642,48,633,52,625,56,617,65,607,80,584,77,582,68,582" target="Japo18"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="77,657,74,663,73,671,88,673,95,668,98,662,96,657" alt="Japo20"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="65,689,58,695,52,700,49,706,63,705,71,691" target="Japo21"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="78,772,76,777,77,782,81,785,91,786,91,779,89,769" target="Japo22"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="108,759,113,755,115,763,110,769,107,774,103,779,99,780,96,780" target="Japo23"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="74,748,85,748,83,753,75,756" target="Japo24"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="28,789,43,801,55,799,58,793" target="Japo25"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="313,576,306,581,300,591,301,598,310,599,312,593,315,583,318,582" target="Japo26"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="278,576,286,583,281,583,287,577,287,575,285,575" target="Japo27"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="222,584,222,588,226,592,229,593,236,589,235,582" target="Japo28"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="255,577,253,582,255,587,257,584,261,581,261,583,261,584,261,581" target="Japo29"  nohref="nohref" />

        <area shape="poly" onclick="missatgeAct3P2('E')" coords="189,596,187,599,187,603,192,603,195,603,198,601,200,596" target="Japo30"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="534,216,539,222" target="Japo31"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="143,541,150,547" target="Japo32"  nohref="nohref" />

        <area shape="rect" onclick="missatgeAct3P2('E')" coords="65,765,72,771" target="Japo33"  nohref="nohref" />

        <!-- <area shape="rect" onclick="missatgeAct3P2('Nagasaki')"  coords="40,610,105,675" target="Nagasaki"  />

        <area shape="rect" onclick="missatgeAct3P2('Hiroshima')" coords="165,555,225,615" target="Hiroshima" /> -->

        <area shape="rect" href="www.google.cat"  coords="40,610,105,675" target="Nagasaki"  />

        <area shape="rect" href="www.google.cat"  coords="165,555,225,615" target="Hiroshima" />

Donde asigno el cursor:

#mapJapo {

    cursor: url(../imatges/ubicacio.png), auto;  /* IE I Edge */

    cursor: url(../imatges/ubicacio.png), 16 16, auto; /* la resta de navegadors */

Y adjunto la imagen, por si lo quieres probar:
mapaJapon

Gracias

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

Enlace imagen mapeada

Publicado por joel (460 intervenciones) el 07/04/2021 17:28:05

Hola Marta, he probado tu código con una imagen de cursor, y según entiendo tu problema, el cursor se pone el definido, únicamente cuando estas sobre alguna parte del mapa, en el momento que te sales del mapa, se pone el cursor normal del sistema. Es este el problema?

cabe decir, que esta linea esta mal:

cursor: url(../imatges/ubicacio.png), 16 16, auto;

te sobra una coma. es así:

cursor: url(../imatges/ubicacio.png) 16 16, auto;

Valora esta respuesta

Comentar

Pos: 37

Val: 33

Enlace imagen mapeada

Publicado por Marta (17 intervenciones) el 07/04/2021 17:47:46

Gracias, he corregido el error, pero persiste el problema.
He colgado el ejemplo en https://jsfiddle.net/onup6awe/6/

He puesto un enlace a las dos áreas que me interesan. El borde es justo las coordenadas asignadas, de acuerdo?
imatge1

Muévete con el ratón por estas zonas y verás cómo cambia el cursor dentro del mismo recuadro. Yo quiero que cualquier punto que se clique dentro del recuadro, salga se ejecute el alert y esto no pasa

Gracias

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

Enlace imagen mapeada

Publicado por joel (460 intervenciones) el 07/04/2021 20:23:48

Hola Marta, a mi si me sales los dos alert¿? no entiendo... que navegador estas utilizando??

Valora esta respuesta

Comentar

Pos: 37

Val: 33

Enlace imagen mapeada

Publicado por Marta (17 intervenciones) el 07/04/2021 21:06:31

Si Joel, te salen los dos alerts, a mi también.
A ver si me explico, la ciudad que quiero que encuentren se halla dentro del recuadro que se forma con las coordenadas de la imagen mapeada, de acuerdo, y que he adjunto pantallazo.
Bien, sin clicar ni nada, muévete por dentro del recuadro. Debería aparecer siempre el cursor del help, y no es así. Es lo que no entiendo

Fíjate en esta imagen. La puntita de abajo del icono rojo apunta justo donde está una de las ciudades. Si te das cuenta está completamente dentro de las coordenadas asignadas para que apareciera el icono del help
imatge3

Fíjate con esta otra captura, un par de milímetros a la derecha, sí aparece. Es lo que no entiendo
imatge4

Espero haberme explicado. Gracias

Valora esta respuesta

Comentar