jQuery Girl
  1. jQuery Girl
  3. Prendre la carte de la zone HTML et convertir en d
Intereting Posts
La validation MVC4 ne fonctionne pas Afficher la quantité dans le panier dans les produits div avec ajax re-déclencher le même événement d’index d’tabs Le bouton Hamburgler.js ne fonctionne pas sur les appareils mobiles Sélecteur jQuery – insertion de la valeur uniquement dans l’id sélectionné Garder le menu Jquery slideDown ouvert lorsque vous survolez ce menu? Quel est l’équivalent de $ («. Cell: first») de jQuery dans D3? jquery exotic id selection Comment redirect vers une nouvelle page (avec le modèle) sur l’appel ajax JQuery dans MVC3 Ionic2 Comment utiliser le plugin JQuery dans une page Dites à JQuery Mobile de ne pas append de classes? Obtenir le nombre d’abonnements Google+ avec jQuery bouton de la rangée de données Lier le .datepicker () à de nouveaux éléments d’entrée Chargement de contenu AJAX dynamic dans Fancybox

Prendre la carte de la zone HTML et convertir en d

J’ai une carte de zone utilisant des coordonnées droites pour mettre en évidence les tables d’un plan d’étage qui sont occupées. Lorsque vous passez dessus, les tables occupées affichent le nom de la société. Assez facile.

Ce que je veux faire, c’est prendre ces coordonnées et, en utilisant une classe div pour les coordonnées de chaque table, avoir une opacité plus sombre dessus pour référence visuelle. Il est assez facile de calculer la valeur supérieure / gauche pour chaque tableau ainsi que de calculer la largeur et la hauteur. Je ne sais tout simplement pas comment utiliser ces valeurs dans jQuery pour append cette fonctionnalité. Voici un extrait de code. 

  Booth 73 Booth 62 Booth 64

Ne vous embêtez pas avec une carte d’image. Il est inutile:

Ajoutez ceci à votre feuille de style et vous avez terminé: 

 .map { position: relative; } .map a{ position: absolute; display: block; background: black; opacity: 0.1; } .map a:hover{ opacity: 0.5; }

Si vous ajoutez un conteneur à l’image, vous pouvez append une superposition à l’image via JavaScript (ou CSS): 

   Booth 73 Booth 62 Booth 64

JS– 

 //cache the span wrapper so it only has to be selected once var $imgSpan = $('#img-span'); //bind a mouseleave event handler to the image map so when the user moves the cursor away from the image map the overlays will be removed $('#fp').on('mouseleave', function () { $imgSpan.children('.overlay').remove(); //bind a mouseenter event handler to the image map area tags to create an overlay }).children('area').on('mouseenter', function () { var $this = $(this); $imgSpan.children('.overlay').remove() .prepend('
'); });

CSS– 

 #img-span .overlay { position : absolute; opacity : 0.6; filter : alpha(opacity=60); z-index : 1000; }

Remarque: .on() est nouveau dans jQuery 1.7 et, dans ce cas, est identique à .bind() .

Remarque: je n’utilise jamais de mappage d’image. Je ne suis donc pas sûr qu’il soit possible d’obtenir leurs propriétés de style top / left / width / height $(this).attr('coords') vous pouvez simplement obtenir l’atsortingbut coords ( $(this).attr('coords') ) et l’parsingr dans les informations appropriées.