JQuery Image Map Вопрос

Question

Я работаю на изображение карты Соединенных Штатов, где пользователь катится по образу и что состояния отображения информации на правой стороне, вы можете увидеть его здесь:

http://www.quiznosforsale.com/test/

Теперь мне нужно, чтобы этот эффект опрокидывания остановился, когда вы нажимаете на состояние, чтобы они могли потенциально щелкнуть информацию, отображаемую с правой стороны, и, если они передумают, они могут снова щелкнуть по состоянию и вернуться на onHover функция. Есть ли способ в jQuery, чтобы я мог отложить функцию onHover, когда нажимается часть карты изображения?

Мой JQuery в настоящее время выглядит следующим образом: (он выключен учебник)

(function(C){var A,B,I,J,K,G,E,D,F,H; 
A=document.namespaces;has_canvas=document.createElement("canvas");has_canvas=has_canvas&&has_canvas.getContext; 
if(!(has_canvas||A)){C.fn.maphilight=function(){return this};return }if(has_canvas){E=function(M,N,L){if(N<=1){M.style.opacity=N;window.setTimeout(E,10,M,N+0.1,10)}};D=function(L){return Math.max(0,Math.min(parseInt(L,16),255))}; 
F=function(L,M){return"rgba("+D(L.substr(0,2))+","+D(L.substr(2,2))+","+D(L.substr(4,2))+","+M+")"}; 
B=function(L){var M=C('<canvas style="width:'+L.width+"px;height:"+L.height+'px;"></canvas>').get(0);M.getContext("2d").clearRect(0,0,M.width,M.height);return M}; 
I=function(Q,M,L,P){var O,N=Q.getContext("2d"); 
N.beginPath();if(M=="rect"){N.rect(L[0],L[1],L[2]-L[0],L[3]-L[1])}else{if(M=="poly"){N.moveTo(L[0],L[1]);for(O=2;O<L.length;O+=2){N.lineTo(L[O],L[O+1])}}else{if(M=="circ"){N.arc(L[0],L[1],L[2],0,Math.PI*2,false)}}}N.closePath();if(P.fill){N.fillStyle=F(P.fillColor,P.fillOpacity);N.fill()}if(P.stroke){N.strokeStyle=F(P.strokeColor,P.strokeOpacity); 
N.lineWidth=P.strokeWidth;N.stroke()}if(P.fade){E(Q,0)}}; 
J=function(L,M){L.getContext("2d").clearRect(0,0,L.width,L.height)}}else{document.createStyleSheet().addRule("v\\:*","behavior: url(#default#VML); antialias: true;");document.namespaces.add("v","urn:schemas-microsoft-com:vml");B=function(L){return C('<var style="zoom:1;overflow:hidden;display:block;width:'+L.width+"px;height:"+L.height+'px;"></var>').get(0)};I=function(P,M,L,O){var R,S,N,Q;R='<v:fill color="#'+O.fillColor+'" opacity="'+(O.fill?O.fillOpacity:0)+'" />';S=(O.stroke?'strokeweight="'+O.strokeWidth+'" stroked="t" strokecolor="#'+O.strokeColor+'"':'stroked="f"');N='<v:stroke opacity="'+O.strokeOpacity+'"/>';if(M=="rect"){Q=C('<v:rect filled="t" '+S+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+L[0]+"px;top:"+L[1]+"px;width:"+(L[2]-L[0])+"px;height:"+(L[3]-L[1])+'px;"></v:rect>')}else{if(M=="poly"){Q=C('<v:shape filled="t" '+S+' coordorigin="0,0" coordsize="'+P.width+","+P.height+'" path="m '+L[0]+","+L[1]+" l "+L.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+P.width+"px;height:"+P.height+'px;"></v:shape>')}else{if(M=="circ"){Q=C('<v:oval filled="t" '+S+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(L[0]-L[2])+"px;top:"+(L[1]-L[2])+"px;width:"+(L[2]*2)+"px;height:"+(L[2]*2)+'px;"></v:oval>')}}}Q.get(0).innerHTML=R+N;C(P).append(Q)};J=function(L){C(L).empty()}}K=function(N){var M,L=N.getAttribute("coords").split(",");for(M=0;M<L.length;M++){L[M]=parseFloat(L[M])}return[N.getAttribute("shape").toLowerCase().substr(0,4),L]};H=function(L){if(!L.complete){return false}if(typeof L.naturalWidth!="undefined"&&L.naturalWidth==0){return false}return true}; 
G={position:"absolute",left:0,top:0,padding:0,border:0};C.fn.maphilight=function(L){L=C.extend({},C.fn.maphilight.defaults,L);return this.each(function(){var N,Q,P,R,O,M;N=C(this);if(!H(this)){return window.setTimeout(function(){N.maphilight()},200)}P=C.metadata?C.extend({},L,N.metadata()):L;R=C('map[name="'+N.attr("usemap").substr(1)+'"]');if(!(N.is("img")&&N.attr("usemap")&&R.size()>0&&!N.hasClass("maphilighted"))){return }Q=C("<div>").css({display:"block",background:"url("+this.src+")",position:"relative",padding:0,width:this.width,height:this.height});N.before(Q).css("opacity",0).css(G).remove();if(C.browser.msie){N.css("filter","Alpha(opacity=0)")}Q.append(N);O=B(this);C(O).css(G);O.height=this.height;O.width=this.width; 
M=function(T){var S=K(this);I(O,S[0],S[1],C.metadata?C.extend({},P,C(this).metadata()):P)};if(P.alwaysOn){C(R).find("area[coords]").each(M)}else{C(R).find("area[coords]").mouseover(M).mouseout(function(S){J(O)})}N.before(O);N.addClass("maphilighted")})};C.fn.maphilight.defaults={fill:true,fillColor:"ffba00",fillOpacity:1,stroke:true,strokeColor:"ffba00",strokeOpacity:1,strokeWidth:4,fade:true,alwaysOn:false}})(jQuery); 

/* Hand Rolled From HERE on out!*/ 
     $(document).ready(function() { 
$('[class^=state]').hide(); 
$('[class^=link]').mouseover(function() { 
$('[class^=state]').hide();        
var $this = $(this); 
var x = $this.attr("className"); 
$('.state-' + x).show(); 

return false; 
}); 
}); 

затем называет его здесь:

<script>$(function() { 
     $('.map').maphilight(); 
    });</script> 

Любая помощь будет высоко ценится!

Answer 1

Выглядит из кода Quiznos, что у них есть 50 изображений, которые имеют крен над действиями.

Если вы посмотрите на код, вы заметите, что каждое государство имеет собственное имя класса. Я подозреваю, что они делают позиционирование каждого изображения состояния точно на странице, чтобы оно выглядело как карта Штатов.

Это (много) работы. Разумеется, хороший разработчик должен иметь возможность получить свой CSS и работать с этим, но это было бы не так уж и важно сейчас! :)

Редактировать

Подождите, я думаю, что я понимаю ваш вопрос сейчас. Код беспорядок, но объяснение явно понятно.

Когда вы нажимаете на состояние, вы можете, конечно, избавиться от события для этого изображения состояния (отвязав) от мыши над событием и добавить событие click. Затем вы также сохраняете выбранное состояние.

После этого вы можете отменить процесс, отменив событие щелчка и повторно наведя курсор мыши на событие.

Это близко к тому, что вы просите? Если это так, пожалуйста, отметьте это как правильный ответ.

EDIT Реализация

Я думаю, что код, который вы получили от образца слишком запутанна, чтобы работать. Принять много усилий, чтобы найти то, что не работает. Я бы начал снова.

1. Сначала я хотел бы получить два простых изображения и выровнять их бок о бок с помощью CSS.
2. я потом телеграфировать наведении курсора мыши события их с помощью JQuery, которая изменила цвет изображения или что-то полезное , чтобы указать, что это работает.
3. Затем я подключу событие клика к изображению, и снова щелкнув, я бы предупредил что-то, чтобы указать на успех.
4. Теперь у вас есть базовая структура вашего рабочего решения.
5. Теперь нажимайте, сохраните id/classname/name, что угодно, изображения в переменной.
6. Затем удалите событие перемещения мыши со всех элементов на странице с помощью jQuery. Это можно сделать одной командой, если вы сделаете это правильно.
7. Загрузка содержимого для изображения, которое вы выбрали.
8. При щелчке изображения подключите мыши к событиям перемещения изображений, снова это одна команда jquery.

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

надеюсь, что это поможет.