Поднимите часть изображения на musover

Question

Поднимите часть изображения на musover

0

Я внедряю веб-приложение. Теперь у меня есть MAP image одного из состояний, и я разделяю каждый район, вычисляя координаты этого района.

Ниже приведен образ MAP, который я использую:

И следующие координаты:

<area id="puneArea" shape="poly" coords="154,250,157,250,158,251,160,251,162,253,165,253,167,254,170,254,173,254,174,255,175,257,175,258,177,260,178,262,179,263,182,264,184,264,187,266,190,267,192,267,196,267,198,267,199,268,199,270,198,271,198,274,195,275,192,276,191,278,190,279,190,283,190,284,191,287,192,288,195,291,196,293,198,296,201,297,203,301,204,302,207,302,208,302,209,306,211,310,213,312,213,312,215,314,216,314,217,316,219,318,219,321,220,322,221,325,221,326,222,329,224,330,224,331,225,334,226,337,226,338,228,339,229,339,229,339,232,338,232,337,232,335,234,335,237,335,237,335,238,338,238,339,238,340,238,342,241,343,242,344,243,346,245,347,245,348,246,350,246,354,246,358,247,359,249,359,250,358,251,358,254,358,255,358,257,358,258,356,259,358,262,359,263,359,266,361,266,364,268,364,270,364,271,367,272,368,274,369,275,371,275,372,276,373,274,375,271,376,267,379,266,381,266,384,266,384,266,385,268,385,270,385,271,388,270,389,268,390,262,390,260,390,258,389,255,389,253,388,250,386,249,384,242,382,238,381,233,380,228,377,224,377,221,377,216,377,213,376,211,376,208,375,205,375,204,375,203,373,200,373,194,373,191,373,190,373,187,372,184,371,182,369,179,369,175,368,173,367,169,365,166,365,162,365,163,367,163,371,162,372,161,373,158,375,158,376,154,377,153,377,146,377,144,377,141,377,137,377,136,375,136,373,136,371,137,368,140,367,139,364,133,364,131,361,129,361,129,359,129,356,131,355,127,354,125,354,123,352,120,348,120,347,118,342,116,337,116,337,116,334,115,331,114,329,112,326,112,323,112,321,112,320,112,318,112,316,114,313,114,310,115,309,115,308,116,304,116,304,116,301,119,299,120,296,121,295,123,292,125,289,128,288,131,285,131,284,131,283,131,281,131,278,131,275,131,275,131,270,132,270,133,270,136,268,137,267,137,267,140,267,141,266,142,264,144,260,144,259,144,258,144,258,144,258
" href="pune.html" alt="Sun">

когда я нажимаю на Pune district района Pune district, я могу отобразить новую страницу. Но теперь я хочу, когда mouserOver в районе Пуне, область Пуне будет поднимать вверх, это будет выглядеть так: "Это область пуна".

Итак, как я могу это сделать в javascript или в jquery.

Любая помощь будет оценена. благодаря

PTech 19 окт. 2014, в 16:38

Источник

0

Вопрос недостаточно ясен, уточните, что именно вы хотите сделать.
ProllyGeek 19 окт. 2014, в 14:41
0

@ProllyGeek -На самом деле, когда я наведите курсор мыши на конкретную область района для моего примера, как "Pune area". Только эта часть области Пуны будет отображена так, чтобы это выглядело как "область Пуны"
PTech 19 окт. 2014, в 14:47
0

что значит воспитывать, как подсказка? текст? изображение? или что ?
ProllyGeek 19 окт. 2014, в 14:47
0

@ProllyGeek - «Поднимись» означает, что я хочу, когда я наводю курсор мыши на определенную область, она заполняется так, как будто это та область, которую ты выбрал вот так
PTech 19 окт. 2014, в 14:52

Показать ещё 2 комментария

Теги:

javascript

jquery

css3

3d

3 ответа

Ещё вопросы

Вопрос недостаточно ясен, уточните, что именно вы хотите сделать.
@ProllyGeek -На самом деле, когда я наведите курсор мыши на конкретную область района для моего примера, как "Pune area". Только эта часть области Пуны будет отображена так, чтобы это выглядело как "область Пуны"
что значит воспитывать, как подсказка? текст? изображение? или что ?
@ProllyGeek - «Поднимись» означает, что я хочу, когда я наводю курсор мыши на определенную область, она заполняется так, как будто это та область, которую ты выбрал вот так

user3617709 · Answer 1 · 2014-10-19T15-22-00.000Z

Вы можете создать событие onmouseover для каждого тега области и передать имя региона в качестве параметра для функции javascript, как показано ниже.

<area shape="rect" coords="0,0,82,126" alt="Sun" href="pune.html" onmouseover="PopName('Pune')">

И вы можете указать параметр области, который вы хотите отобразить. Я только что нажал окно оповещения для справки.

<script>
function PopName(x) {
   alert("This is" + x);
}
</script>

Чтобы выделить область Pune, вы можете добавить динамический css.

Ниже приведен пример кода. Вы можете импровизировать его в соответствии с вашими потребностями в сети.

<body>
<p id="p1" onmouseover="change()"></p>
<img src="http://i.stack.imgur.com/u5F7E.png" usemap="#newname">
<map name="newname">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="index.html" onmouseover="PopName('Mumbai')">
</map>
<div id="pop"></div>
</body>
<script>
function PopName(x) {
   document.getElementById("pop").innerHTML = '<img src="http://www.world-guides.com/images/mumbai/mumbai_city_map.jpg">';
   document.getElementById("p1").innerHTML = "This is " + x;
}
</script>

Protect Life Save Forests · Answer 2 · 2014-10-19T14-35-00.000Z

Проверьте эти ссылки, если вы хотите выделить область события onMouseOver,

http://www.outsharked.com/imagemapster/

Использование jQuery для выделения div, в то время как вычеркивание других

и если вы хотите масштабировать, расти или сжиматься, вы можете использовать jquery animate

http://docs.jquery.com/Effects/animate.

Также взгляните на следующие ссылки,

шкала jquery: http://api.jqueryui.com/scale-effect/

Есть ли способ увеличить/уменьшить изображение при наведении с помощью JQuery?

ProllyGeek · Answer 3 · 2014-10-19T13-54-00.000Z

В вашем случае вы должны относиться к своей карте как к вектору или SVG, aftrwards вы можете заполнить область, или hightlight it, добавить штрих.. и т.д., Это можно сделать с помощью jvectormaps

имеет хороший supposrt и прост в использовании, вы можете начать здесь:

http://jvectormap.com/tutorials/getting-started/

PS: вы можете добавить собственные пользовательские карты для использования.