jQuery наведите указатель на определенную область изображения

Question

В итоге я искал код для ввода моего существующего кода. В принципе, у меня есть наборы изображений, которые запускают divs при зависании. Я создал родительские функции зависания, задержки и анимации для каждого изображения. PNG Изображения не квадратные, прямоугольные или круглые, но стильные, поэтому, когда я нахожу любую часть прозрачной области, div активируется. Я не могу попробовать координаты карты изображения, потому что у меня есть изображения с шириной в процентах, поэтому мне нужна простая функция, которая может добавлять прописку под моими существующими изображениями, поэтому наведение работает только прямоугольником или квадратной частью.

Вот раздел моего сайта, где я хочу привести CHANGE!

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

Пока мой код:

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

Как о чем-то вроде этого FIDDLE.

Вы можете использовать абсолютно позиции divs и запускать, когда вы над ними.

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