web-dev-qa-db-fra.com

Définir une couleur d'arrière-plan sur l'élément HTML <area>?

Est-il possible de définir une couleur d'arrière-plan pour l'élément HTML <area>? Je crée une carte-image dans laquelle certaines sections de la carte afficheront une info-bulle lorsque vous les survolerez avec la souris. Je pensais que ce serait cool (et pratique) de définir une couleur d'arrière-plan pour les éléments <area> afin où ils étaient situés sur l'image.

J'ai essayé à la fois la couleur d'arrière-plan et la bordure, mais je n'ai aucun effet: les éléments <area> restent "invisibles". Je suppose que c'est parce que <area> est une balise à fermeture automatique et qu'elle n'a donc aucune dimension? Mais forcer une hauteur et une largeur n'a pas aidé non plus.

htmlborderbackground-colorimagemaparea
16
daGUY

vous pouvez utiliser div(set postition:absolute) au lieu de area 

2
irockman

Cela ne semble pas possible.

Vous voudrez peut-être regarder dans ce plugin jQuery:

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

Voici un exemple:

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

Deux bibliothèques offrent cette fonctionnalité. Les deux fonctionnent de la même manière très simple: en vérifiant si le navigateur prend en charge Canvas, si tel est le cas, dessinez une forme de canevas et si ce n’est pas le cas (Internet Explorer), dessinez VML.

  • Maphilight comme mentionné ci-dessus ( lien qui fonctionne en 2013 )
    • Comprend également le regroupement de base
  • ImageMapster (plugin jQuery) qui fournit ceci, ainsi que d'autres fonctionnalités de carte::
    • Mise à l'échelle des cartes-images (par exemple, pour une utilisation avec des images sensibles)
    • Passer à des images alternatives dans la zone
    • Infobulles faciles et reliure d'événement avec des listes
    • Regroupement

Il y a de très bons démos sur le site ImageMapster .

0
user568458