Résoudre ce problème d’imagemap?

J’ai la situation suivante (s’il vous plaît voir l’image ci-dessous après avoir lu ce qui suit):

1. .dragoverlay (rectangle blanc dans l’image) est un div (jQuery) déplaçable. il a la même taille que la fenêtre d’affichage du navigateur.
2. .items (petit (s) carré (s) rouge (s) dans l’image) est une .items absolue de taille 0x0.
3. Les carrés d’ items bleu clair sont des divs parfaitement positionnés avec une image à l’intérieur et sont situés dans des .items .
4. Les polygones darblue sont des cartes-images appartenant aux éléments.

J’ai actuellement le code HTML suivant:

  div.items { position:absolute; z-index:98; } div.dragoverlay { position:absolute; z-index:97; background-image:url('../img/transparentpixel.gif'); } div.item { }  
 
   
    

Lorsque le .dragoverlay blanc est déplacé, les .items rouges sont déplacés en conséquence. Cette configuration est nécessaire.

Comment puis-je utiliser les zones bleu clair des éléments (juste en dehors de chaque imagemap bleu) comme sharepoint départ du glisser? Comme si l’utilisateur .dragoverlay zone .dragoverlay …

• Comment animer une icône de Hamburger animée CSS sur MouseOver
• Comment créer une structure html spécifique pour la barre de recherche de datatables?
• Exécuter la fonction après qu’une fonction est terminée – JQuery animate
• Image d’arrière-plan non enregistrée dans WordPress Customizer
• Charger du code HTML externe dans Iframe et accéder au contenu

texte alternatif http://i50.tinypic.com/2wd673p.jpg

• IE7: impossible pour le menu de restr en haut de la page
• La table de chargement perd dynamicment les règles de style
• JQuery Mobile – css à changement dynamic avec Javascript
• Animation sur défilement vers le bas
• Menu CSS vs menu JavaScript