jQuery Image Map Question

Question

I'm working on an image map of the united states where a user rolls over the image and that states information displays on the right side, you can see it here:

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

Now I need to have that rollover effect stop when one clicks on the state so that they could potentially click on the information that appears on the right side, and if they change their mind they could click on the state again and it returns on the onHover function. Is there a way in jQuery that I could pospone the onHover function when a portion of the image map is clicked?

My jQuery currently look like this: (it's off a tutorial)

(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;
});
});

then calls it here:

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

Any help would be much appreciated!

Answer 1

Looks to me, by looking at the code from Quiznos, that they have 50 images that have roll over actions attached.

If you take a look at the code you will notice that each state has its own class name. What I suspect they are doing is positioning each state image exactly on the page so that it looks like the map of the States.

That's a (lot) of work. Of course, a good developer should be able to get their CSS and work with that but that wouldn't exactly be ethical now would it! :)

Edit

Wait, I think I understand your question now. The code is a mess but the explanation is kinda clear.

When you click on a state you can certainly get rid of the event for that State image by (unbind)ing the mouse over event and adding a click event. You then also store the selected State.

Then on click you reverse the process by unbinding the click event and re-instating the mouse over event.

Is that close to what you are asking? If it is then please mark this as the correct answer.

EDIT Implementation

I think the code you got from the sample is too messy to work with. It would take a lot of effort to find what is not working. I'd start again.

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.

that should largely be the solution. once you have this very simple example built you can make it more complex by adding images etc until you have your map working.

hope this helps.

Answer 2

Hey sorry for the messy code. I got it off a tutorial for image mapping. I think within this part:

$(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; }); });

Would lie my question. and I think griegs answered it correctly, but how might I implement that?