wake-up-neo.com

Hintergrundfarbe für das HTML-Element <area> festlegen?

Gibt es eine Möglichkeit, eine Hintergrundfarbe für das HTML-Element <area> festzulegen? Ich erstelle eine Imagemap, in der bestimmte Abschnitte der Map einen Tooltip anzeigen, wenn Sie mit der Maus darüber fahren. Ich dachte, es wäre cool (und praktisch), wenn ich eine Hintergrundfarbe für die <area> -Elemente festlegen könnte, damit Sie sehen können wo sie sich über dem Bild befanden.

Ich habe sowohl die Hintergrundfarbe als auch die Rahmenfarbe ausprobiert und habe auch keine Auswirkungen - die <area> -Elemente bleiben "unsichtbar". Ich nehme an, das liegt daran, dass <area> ein sich selbst schließendes Tag ist und daher eigentlich keine Dimensionen hat. Aber das Erzwingen von Höhe und Breite half auch nicht.

16
daGUY

sie können div(set postition:absolute) anstelle von area verwenden 

2
irockman

Es scheint nicht möglich zu sein.

Vielleicht möchten Sie in dieses jQuery-Plugin schauen:

http://plugins.jquery.com/project/maphilight

Hier ist ein Beispiel:

http://davidlynch.org/js/maphilight/docs/demo_usa.html#

3
Jason Gennaro
<script>
 $(function() 
 {
      $('.map').maphilight({
      fillColor: '008800'
 });
 var data = $('#id').data('maphilight') || {};

 data.alwaysOn = !data.alwaysOn;
 $('#id').data('maphilight', data).trigger('alwaysOn.maphilight');
 });

1
Akhilesh Kumar

Es gibt zwei Bibliotheken, die diese Funktion bereitstellen. Beide arbeiten auf die gleiche, nicht triviale Weise, indem sie prüfen, ob der Browser Canvas unterstützt. Wenn dies der Fall ist, zeichnen Sie eine Canvas-Form und, falls dies nicht der Fall ist (d. H. Internet Explorer), VML.

  • Maphilight wie oben erwähnt ( Verbindung, die 2013 funktioniert )
    • Schließt auch grundlegende Gruppierung ein
  • ImageMapster (jQuery-Plugin), das dieses und andere Image-Map-Funktionen bereitstellt:
    • Skalieren von Image Maps (z. B. zur Verwendung mit responsiven Bildern)
    • Wechseln zu alternativen Bildern innerhalb des Bereichs
    • Einfache Tooltips und Ereignisbindung mit Listen
    • Gruppierung

Es gibt einige ziemlich gute Demos auf der ImageMapster Site.

0
user568458