etiquetas - title html definicion

Etiqueta de área visible?

Question

¿Cómo visualizo un html <area /> visible en todo momento, no solo en el enfoque?

Parece que debería ser tan simple como esto:

html:

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

css:

area {border: 1px solid red}

No importa lo que haga, parece que no puedo afectar el diseño de un área, parece genuinamente inmune a CSS. ¿Algunas ideas? Además, ¿hay algún otro ejemplo de etiquetas que no sean de estilo?

Answer 1

La etiqueta de area simplemente define el espacio en el que el usuario puede hacer clic, no hay una representación visual de él, por lo que no puede usar CSS para darle un estilo. Me gusta hacia dónde te diriges, pero desafortunadamente necesitarás usar javascript para superponer una imagen transparente en la parte superior de tu mapa de imágenes para lograr lo que estás tratando de hacer.

Answer 2

jQuery Plugin, MapHilight:

Puede encontrar el plugin jQuery MapHilight de interés aquí.

• Mapa de los Estados Unidos Demo

Alternativa HTML / CSS

Sugeriría usar un div, con enlaces absolutos dentro. La razón es que esto se degradará muy bien y mostrará todas las opciones como una lista de enlaces. Los mapas de imagen no serán tan amigables. Además, esta alternativa ofrecerá los mismos resultados, con prácticas más limpias y más modernas.

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

-

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

Answer 3

Si tan solo fuera así de fácil.

Si desea dibujar formas simples, es posible que pueda llegar utilizando el elemento HTML <canvas>, que es lo que utilizan las bibliotecas como flot (IE requiere el emulador excanvas).

Todavía requerirá una gran cantidad de Javascript, pero podría ser más fácil / más efectivo que jugar con imágenes superpuestas, especialmente si los tamaños de sus formas no son estáticos. Hay un buen tutorial aquí .

Answer 4

Entonces tu pregunta me llegó a casa. Me encantaría poder hacer algo similar usando etiquetas de área para obtener pequeñas y agradables "formas" que no sean cuadradas para las áreas de interés. Así que investigué un poco y esto es lo que encontré:

http://www.netzgesta.de/mapper/

No parece que hará 100% lo que quieras, pero tal vez sea un punto de partida.

Answer 5

Hay otra opción Puedes escribir un SVG. Luego puede ver la forma al establecer el relleno: verde; opacidad de relleno: 1;

<svg height="300" width="200">
  <a xlink:href="http://.com/">
    <ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
  </a>
</svg>