jQuery hover zone spécifique d'une image

Question

J'ai fini par chercher un code à mettre dans mon code existant. Fondamentalement, j'ai des séries d'images qui déclenchent un divs en vol stationnaire. J'ai fait le hover de javascript de parent, de retarder et d'animer des fonctions pour chaque image. Les images PNG ne sont pas carrées, rectangle ou cercle mais élégantes, donc quand je planerai n'importe quelle partie de la zone transparente, div déclenché. Je ne peux pas essayer les coordonnées de la carte d'image parce que j'ai des images de largeur de pourcentage ainsi j'ai besoin de la fonction simple qui pourrait ajouter le remplissage sous mes images existantes ainsi le vol stationnaire fonctionne seulement le rectangle ou la pièce carrée.

Voici la section de mon site Web où je veux apporter le CHANGEMENT!

http://www.mythstreet.com/#our-services 

Jusqu'à présent, mon code:

jQuery(document).ready(function($) { 
    $("#svbx1").hover(function() { 
     $("#svrs2").stop(true, true).slideUp(); 
     $("#svrs3").stop(true, true).slideUp(); 
     $("#svrs4").stop(true, true).slideUp(); 
     $("#svrs1").slideDown(); 
    }, function() { 
     $("#svrs1").delay(20000).slideUp(); 
    }); 
    $("#svbx2").hover(function() { 
     $("#svrs1").stop(true, true).slideUp(); 
     $("#svrs3").stop(true, true).slideUp(); 
     $("#svrs4").stop(true, true).slideUp(); 
     $("#svrs2").slideDown(); 
    }, function() { 
     $("#svrs2").delay(20000).slideUp(); 
    }); 
    $("#svbx3").hover(function() { 
     $("#svrs1").stop(true, true).slideUp(); 
     $("#svrs2").stop(true, true).slideUp(); 
     $("#svrs4").stop(true, true).slideUp(); 
     $("#svrs3").slideDown(); 
    }, function() { 
     $("#svrs3").delay(20000).slideUp(); 
    }); 
    $("#svbx4").hover(function() { 
     $("#svrs1").stop(true, true).slideUp(); 
     $("#svrs2").stop(true, true).slideUp(); 
     $("#svrs3").stop(true, true).slideUp(); 
     $("#svrs4").slideDown(); 
    }, function() { 
     $("#svrs4").delay(20000).slideUp(); 
    }); 

    }); 

Answer 1

Que diriez-vous quelque chose comme ça FIDDLE.

Vous pouvez utiliser des positions divs absolues et vous déclencher lorsque vous les survolez.

CSS

.myimage { 
    width: 300px; 
    height: 300px; 
    position: relative; 
} 
.face { 
    width: 60px; 
    height: 90px; 
    border: 1px solid black; 
    top: 70px; 
    left: 70px; 
    position: absolute 
} 
.hat { 
    width: 40px; 
    height: 40px; 
    border: 1px solid red; 
    top: 20px; 
    left: 100px; 
    position: absolute 
} 
.foot { 
    width: 60px; 
    height: 90px; 
    border: 1px solid green; 
    top: 110px; 
    left: 200px; 
    position: absolute 
} 
img { 
    width: 100%; 
    height: 100%; 
} 
.face:hover { 
    background-color: red; 
} 
.hat:hover { 
    background-color: blue; 
} 
.foot:hover { 
    background-color: green; 
}