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 и работать с этим, но сейчас это было бы не совсем этично! :)

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

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

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

Затем при щелчке вы полностью изменяете процесс, отменяя привязку события щелчка и повторно устанавливая событие мыши.

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

РЕДАКТИРОВАТЬ Внедрение

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

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

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

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