[14421] | 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 | }); |
---|