Définir une couleur d'arrière-plan sur la zone HTML & lt; & gt; élément?

Est-il possible de définir une couleur d'arrière-plan pour la page HTML, <area> élément? Je suis la création d'une image de la carte où certaines sections de la carte pour afficher une info-bulle lorsque vous placez la souris au-dessus d'eux, et j'ai pensé qu'il serait cool (et pratique) si je pouvais définir une couleur d'arrière-plan pour le <area> éléments pour que vous puissiez voir où ils étaient situés sur l'image.

J'ai essayé les deux couleur d'arrière-plan et la bordure, et n'ont aucun effet - la <area> éléments restent "invisibles". Je suppose que c'est parce que <area> est une auto-balise de fermeture et donc il n'ont pas réellement de toutes les dimensions? Mais le fait de forcer une hauteur et une largeur n'a pas aider non plus.

source d'informationauteur daGUY

  1. 2

    u peut utiliser div(set postition:absolute) au lieu de la zone

  2. 3

    Il 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. 1
    <script>
 $(function() 
 {
      $('.map').maphilight({
      fillColor: '008800'
 });
 var data = $('#id').data('maphilight') || {};

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

  4. 0

    Il y a deux bibliothèques qui offrent cette fonctionnalité. Tous deux travaillent dans le même très non-trivial, en vérifiant si le navigateur prend en charge la Toile, alors si il le fait, le dessin d'une Toile de forme, et si ça ne marche pas (c'est à dire Internet Explorer), le dessin VML.

    • Maphilight comme mentionné ci-dessus (lien qui fonctionne en 2013)
      • Comprend également la base de regroupement
    • ImageMapster (plugin jQuery), qui fournit de cela en plus d'autres caractéristiques de la carte:
      • De mise à l'échelle de l'image des cartes (p. ex. pour l'utilisation avec les images responsives)
      • De commutation à d'autres images de l'intérieur de la zone
      • Facile les info-bulles et des événements de liaison avec les listes
      • Groupement

    Il y a quelques très bonnes des démonstrations sur le ImageMapster site.

  5. -3

    Vous pouvez donner à la sous-jacentes div id et ensuite à l'aide de javascript pour modifier les divs couleur d'arrière-plan.

          <div id = "myDiv"></div>

    et

          document.getElementById("myDiv").style.backgroundColor = "#FFFFFF";
  6. -3

    Vous pouvez ajouter un titre, de sorte que lorsque quelqu'un hover sur elle, il arrive à connaître.

    Exemple:

    <area title="amazing" shape="rect" coords="0,0,82,126" alt="cool">