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