jQuery hover specific area of an image

Question

I ended up searching for a code to put into my existing code. Basically, I've sets of images that trigger a divs when hovered. I made parent javascript hover, delay and animate functions for each image. PNG Images are not square, rectangle or circle but stylish so when I hover any part of transparent area, div triggered. I can't try image map coordinates because I've percentage width images so I need simple function that could add padding under my existing images so hover works only rectangle or square part.

Here's my website's section where I want to bring the CHANGE!

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

So far my 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

How about something like this FIDDLE .

You can use absolutely positions divs, and trigger when you over over them.

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;
}