1 | jQuery(document).ready(function(jQuery){ |
---|
2 | /* CONFIG */ |
---|
3 | // these 2 variables determine popup's gap from the cursor |
---|
4 | var xGap = 10; |
---|
5 | var yGap = 10; |
---|
6 | var MainTitle =""; |
---|
7 | |
---|
8 | var maxTop = 0; |
---|
9 | var maxLeft =0; |
---|
10 | /* END CONFIG */ |
---|
11 | jQuery("#theMainImage").mouseover(function(){ |
---|
12 | // tooltip IMG title remove |
---|
13 | MainTitle = this.title; |
---|
14 | this.title =""; |
---|
15 | }); |
---|
16 | jQuery("#theMainImage").mouseout(function(){ |
---|
17 | // tooltip IMG title restaure |
---|
18 | this.title = MainTitle; |
---|
19 | }); |
---|
20 | |
---|
21 | jQuery("area,a").mouseover(function(e){ |
---|
22 | MainTitle = jQuery("#theMainImage").attr("title"); |
---|
23 | jQuery("#theMainImage").attr("title",""); // for IE |
---|
24 | this.t = this.title; |
---|
25 | // llgbo conf |
---|
26 | var val = this.title.split("||",15); |
---|
27 | if (val[0].length<1) { return; } |
---|
28 | maxLeft = jQuery(window).width(); |
---|
29 | maxTop = jQuery(window).height(); |
---|
30 | // |
---|
31 | this.activate ='ok'; |
---|
32 | this.title = ""; |
---|
33 | this.tt = "<p id='title'>"+val[0]+"</p>"; |
---|
34 | var pid = "dflt"; |
---|
35 | if (this.className != "navThumb") // no picture for navthumb |
---|
36 | {for (var i=1; i<val.length; i++) { |
---|
37 | if ( val[i].toLowerCase().indexOf("<img") == 0) |
---|
38 | { pid = "pict";} |
---|
39 | this.tt += "<p id="+pid+">"+ val[i]+"</p>";} |
---|
40 | } |
---|
41 | jQuery("body").append("<div id='toolTip'>"+this.tt+"</div>"); |
---|
42 | |
---|
43 | var MyTT = jQuery("#toolTip"); |
---|
44 | if (this.id == "Rules") |
---|
45 | { MyTT.css( {'border-color':'#c92'});} |
---|
46 | if (this.id == "RulesEx") |
---|
47 | { MyTT.css( {'border-color':'#d3fed2'}) |
---|
48 | jQuery("#toolTip #title").css({'color':'#d3fed2'});} |
---|
49 | |
---|
50 | updateXY(e); |
---|
51 | MyTT.css("opacity", 0.25) |
---|
52 | .show; |
---|
53 | MyTT.fadeTo(1200,.95); |
---|
54 | }); |
---|
55 | |
---|
56 | jQuery("area,a").mouseout(function(e){ |
---|
57 | if (this.activate =='ok') // mouseout without mouseover we keep the right title |
---|
58 | { this.title = this.t; |
---|
59 | jQuery("#toolTip") |
---|
60 | .fadeOut("slow") |
---|
61 | .remove(); |
---|
62 | jQuery("#theMainImage").attr("title",MainTitle); // for IE |
---|
63 | } |
---|
64 | }); |
---|
65 | jQuery("area,a").mousemove(function(e){ |
---|
66 | updateXY(e); |
---|
67 | }); |
---|
68 | var updateXY = function(e) { |
---|
69 | var xLeft,yCord,xCord; |
---|
70 | var MyTT = jQuery("#toolTip"); |
---|
71 | var wT = MyTT.width() + 6 /* border */+ xGap; |
---|
72 | var hT = MyTT.height() + 6 /* border */+ yGap; |
---|
73 | |
---|
74 | if ( e.pageX < (maxLeft/2) ) // piwigo left |
---|
75 | {xCord = wT *-1;} |
---|
76 | else { |
---|
77 | xCord =( maxLeft < (e.pageX + wT + xGap)) ? xCord = wT * -1 : xCord = xGap;} |
---|
78 | xLeft = (e.pageX + xCord < 3 ) ? xLeft = e.pageX + xGap : xLeft = e.pageX + xCord; |
---|
79 | yCord =( maxTop < (e.pageY + hT )) ? yCord = hT * -1 : yCord = yGap; |
---|
80 | MyTT |
---|
81 | .css("top",(e.pageY + yCord) + "px") |
---|
82 | .css("left",(xLeft) + "px"); |
---|
83 | } |
---|
84 | }); |
---|