Visible Area Tag?

Question

Wie mache ich einen html <Bereich /> jederzeit sichtbar, nicht nur bei Fokus?

Scheint es devrait so einfach sein wie das hier:

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}

Egal was ich tue, es scheint, dass ich das Styling eines Bereichs überhaupt nicht beeinflussen kann, es scheint wirklich immun gegen css zu sein. Hat jemand eine Idee? Gibt es noch andere Beispiele für nicht gestaltbare Tags?

Answer 1

jQuery Plugin, MapHilight:

Vielleicht finden Sie die jQuery-Plugin MapHilight (toter Link!!!), die hier von Interesse sein könnte.

• Karte der Vereinigten Staaten Demo (toter Link!!!)

Neuer Link: https://github.com/kemayo/maphilight

Neue Demo: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/

HTML/CSS-Alternative

Ich würde vorschlagen, ein div zu verwenden, mit absoluten Links darin. Der Grund dafür ist, dass dies sehr schön abbauen und zeigen alle Optionen als eine Liste von Links. Image Maps werden nicht so freundlich sein. Darüber hinaus liefert diese Alternative die gleichen Ergebnisse mit saubereren und moderneren Verfahren.

#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 2

En area Tag definiert nur den Bereich, in dem der Benutzer klicken kann. Es gibt keine visuelle Darstellung, so dass Sie CSS nicht wirklich zur Gestaltung verwenden können. Ich mag, wo Sie gehen, aber leider müssen Sie wahrscheinlich Javascript verwenden, um ein transparentes Bild über die Oberseite Ihres Bildes Karte zu erreichen, was Sie zu tun versuchen.

Answer 3

Ihre Frage hat mich also sehr berührt. Ich würde gerne etwas Ähnliches machen können, indem ich Flächen-Tags verwende, um nette kleine "Formen" zu erhalten, die nicht quadratisch sind, wenn es um Bereiche von Interesse geht. Also habe ich ein wenig recherchiert und das hier gefunden:

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

Es sieht nicht so aus, als ob es zu 100% das tut, was Sie wollen, aber vielleicht ist es ein Anfang.

Answer 4

Wenn es nur so einfach wäre.

Wenn Sie einfache Formen zeichnen wollen, können Sie vielleicht das HTML <canvas>-Element verwenden, das Bibliotheken wie flot benutzen (IE benötigt den excanvas-Emulator).

Es wird immer noch eine ganze Menge Javascript erfordern, aber es könnte einfacher/effektiver sein, als mit Overlay-Bildern herumzupfuschen, vor allem, wenn die Größen deiner Formen nicht statisch sind. Es gibt ein ziemlich gutes Tutorial aquí .

Answer 5

Es gibt eine weitere Möglichkeit. Sie können ein SVG schreiben. Dann können Sie die Form sehen, indem Sie fill:green; fill-opacity: 1 einstellen;

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