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并使用它，但现在这不符合道德规范！：）

修改

等等，我想我现在明白你的问题。代码很乱，但解释清楚。

单击状态时，您可以通过（解除绑定）鼠标在事件上并添加单击事件来摆脱该状态图像的事件。然后，您还可以存储选定的状态。

然后点击，您可以通过取消绑定点击事件并将鼠标重新设置为事件来反转该过程。

这接近你的要求吗？如果是，请将此标记为正确答案。

编辑实施

我认为你从样本中获得的代码太乱了，无法使用。找到不起作用的东西需要花费很多精力。我重新开始。

首先，我会得到两个简单的图像并使用它们并排排列的CSS。

然后我将鼠标悬停事件连接到他们使用jQuery改变了图像的颜色或东西有用的表明它是工作

然后，我会将点击事件连接到图像，然后再点击，我会发出警告，表示成功。

现在您拥有工作解决方案的基本框架。

现在点击，将图像的id / classname / name存储到变量中。

然后使用jQuery再次从页面上的所有项目中删除鼠标移动事件。如果你做得对，可以在一个命令中完成。

为您选择的图片加载内容。

点击图片后，连接图片的鼠标移动事件，这也是一个jquery命令。

应该主要是解决方案。一旦你建立了这个非常简单的例子，你可以通过添加图像等使其变得更加复杂，直到你的地图工作为止。

希望这会有所帮助。

jQuery图像映射问题

1 个答案: