English 中文(简体)
j 教学图
原标题:jQuery Image Map Question
  • 时间:2009-11-02 02:07:41
  •  标签:

我正在绘制一个统一邦的形象图,在那里,一个用户在图像上播放,并且说信息在正确方面显示,你可以在这里看到:

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

现在,当有人点击国家时,我必须停止这种滚动效应,以便他们有可能点击右边的信息,如果他们改变思想,他们可以再次点击国家,返回后台。 在被点击一部分图像地图时,我是否可以放弃在Hover功能?

我的笑话目前也这样看:(一) 听起来。

(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>

任何帮助都会受到高度赞赏!

问题回答

我想,从基兹诺斯的法典来看,他们有50个图象,显示行动。

如果你看一下该守则,你就会注意到每个国家有自己的阶级名称。 我怀疑他们正在做的是,把每一个国家的形象贴在网页上,这样它就象国家的地图。

这一工作(时间)。 当然,一个良好的开发商应当能够获得其特别安全服务并与之合作,但现在,这无疑是合乎道德的。

<><>Edit>/strong>

瓦伊特,我认为我现在理解你的问题。 守则是个要点,但解释是清楚的。

当你点击某国时,你当然可以通过(unbind)把 mo放在事件上,并增加一个点击事件,来为该国的形象抹杀事件。 然后,你还储存了选定的国家。

然后点击你推翻了这一进程,没有约束点击事件,又把 mo改成事件。

这是否接近你要求? 如果是,请将此列为正确的答案。

<EDIT 执行

我认为,你从样本中得出的代码太过不起作用。 它将作出大量努力,寻找不可行的东西。 我再次开始。

  1. First i would get two simple images and align them side by side using css.
  2. I d then wire up mouseover events to them using jQuery which changed the color of the image or something useful to indicate that it s working.
  3. Then i would wire up a click event to the image and again on click i d alert something to indicate success.
  4. Now you have the basic framework of your working solution.
  5. Now on the click, store the id/classname/name whatever, of the image into a variable.
  6. Then remove the mouse move event from all items on the page again using jQuery. This can be done in a single command if you do it right.
  7. Load content for the image you selected.
  8. On click of the image, wire up mouse move events for the images, again this is a single jquery command.

这在很大程度上应当是解决办法。 一旦你树立了这一非常简单的例子,你就能够增加形象,使情况更加复杂,直到你们的地图发挥作用。

希望这一帮助。





相关问题
热门标签