https://twomorrows.com/includes/templates/twomorrows/jscript/jscript_imagehover.js

1/*
2Simple Image Trail script- By JavaScriptKit.com
3Visit http://www.javascriptkit.com for this script and more
4This notice must stay intact
5 
6Simple Image Trail script- By JavaScriptKit.com was originally modified by Tim Kroeger ([email protected])
7for use with Image Handler 2 and better cross browser functionality
8 
9Later the Simple Image Trail script- By JavaScriptKit.com was further modified by
10[email protected] in an attempt to  fix ie 6 issues see zencart forum IH2 thread
11for detials
12 
13Image Handler Jscript
14Version 4.3.2
15Modified by Nigel Thomson ([email protected]) 12 June 2010
16This  modified version of the Simple Image Trail script- By JavaScriptKit.com (4.1) brings in Opera
17support, and fixes the webkit (Safari and Chrome) Bugs
18Fix for horizontalscrollbar added 23 june 2010
19http://nigeltsblog.blogspot.com/2010/06/zencart-image-handler-webkit-and-opera.html
20Fix for IE9 added 16 March 2011
21http://nigeltsblog.blogspot.com/2011/03/image-handler-and-internet-explorer-9.html
22*/
23 
24var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
25var displayduration=0; //duration in seconds image should remain visible. 0 for always.
26var currentimageheight = 400;    // maximum image size.
27var padding=10; // padding must by larger than specified div padding in stylessheet
28 
29// Global variables for sizes of hoverimg
30// Defined in "showtrail()", used in "followmouse()"
31var zoomimg_w=0;
32var zoomimg_h=0;
33var vpos;
34//Detect IE
35var stIsIE = /*@cc_on!@*/false;
36//detect opera
37var isOpera =
38window.opera?1:0;
39// Detect Webkit browsers
40var isWebKit =
41navigator.userAgent.indexOf("AppleWebKit") > -1;
42 
43if (document.getElementById || document.all){

44document.write('<div id="trailimageid"></div>');
45}
46 
47function getObj(name) {
48if (document.getElementById) {
49this.obj = document.getElementById(name);
50this.style = document.getElementById(name).style;
51} else if (document.all) {
52this.obj = document.all[name];
53this.style = document.all[name].style;
54} else if (document.layers) {
55this.obj = document.layers[name];
56this.style = document.layers[name];
57}
58}
59 
60function gettrail(){
61return new getObj("trailimageid");
62}
63 
64function truebody(){
65if (isWebKit){
66return document.body;
67}else if (isOpera) {
68return document.documentElement;
69}else{
70 
71return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
72}
73}
74 
75function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
76zoomimg_w=zoomimgwidth;
77zoomimg_h=zoomimgheight;
78if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
79trailobj = gettrail().obj;
80trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
81trailobj.style.height=(zoomimgheight+(2*padding))+"px";
82trailobj.setAttribute("startx", startx);
83trailobj.setAttribute("starty", starty);
84trailobj.setAttribute("startw", startw);
85trailobj.setAttribute("starth", starth);
86trailobj.setAttribute("imagename", imagename);
87trailobj.setAttribute("imgtitle", title);
88document.onmousemove=followmouse;
89}
90 
91function hidetrail(){
92trailstyle = gettrail().style;
93trailstyle.visibility = "hidden";
94document.onmousemove = "";
95trailstyle.left = "-2000px";
96trailstyle.top = "-2000px";
97}
98 
99function followmouse(e){
100 
101var xcoord=offsetfrommouse[0];
102var ycoord=offsetfrommouse[1];
103if (stIsIE){
104var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
105var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
106}
107else
108{
109var docwidth=pageXOffset+window.innerWidth-15;
110var docheight=Math.min(window.innerHeight);
111 
112}
113var relativeX = null;
114var relativeY = null;
115if ((typeof e != "undefined") && !(stIsIE)){ // This forces IE9 to go to the else option
116if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
117relativeX = e.layerX;
118relativeY = e.layerY;
119} else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
120//      relativeX = e.x; // original code replaced to work with Opera
121//      relativeY = e.y; // original code replaced to work with Opera
122relativeX = event.offsetX;
123relativeY = event.offsetX;
124}
125if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
126xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
127} else {
128xcoord += e.pageX;
129}
130if (docheight - e.pageY < zoomimg_h + (2 * padding)){
131ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
132// returning different values for ff and (opera and webkit) - fixed 12th june 2010
133} else {
134ycoord += e.pageY;
135}
136 
137} else if (typeof window.event != "undefined"){ // This works for IE
138 
139if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
140relativeX = event.x;
141relativeY = event.y;
142}
143else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
144relativeX = event.offsetX;
145relativeY = event.offsetY;
146}
147 
148if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
149xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
150} else {
151xcoord += truebody().scrollLeft+event.clientX;
152}
153/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
154var ie_offset = -20;
155if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
156/*
157ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
158*/
159ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
160} else {
161ycoord += ie_offset + truebody().scrollTop + event.clientY;
162}
163}
164 
165trail = gettrail();
166startx    = trail.obj.getAttribute("startx");
167starty    = trail.obj.getAttribute("starty");
168startw    = trail.obj.getAttribute("startw");
169starth    = trail.obj.getAttribute("starth");
170imagename = trail.obj.getAttribute("imagename");
171title     = trail.obj.getAttribute("imgtitle");
172 
173// calculate and set position BEFORE switching to visible
174if (stIsIE){
175var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-1

1755;
176var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
177}else{
178var docwidth=pageXOffset+window.innerWidth-15;
179var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
180}
181 
182if(ycoord < 0) { ycoord = ycoord*-1; }
183if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
184if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
185trail.style.left=xcoord+"px";
186trail.style.top=ycoord+"px";
187 
188if (trail.style.visibility != "visible") {
189if (((relativeX == null) || (relativeY == null)) ||
190((relativeX >= startx) && (relativeX <= (startx + startw))
191&& (relativeY >= starty) && (relativeY <= (starty + starth)))){
192newHTML = '<div><h1>' + title + '</h1>';
193newHTML = newHTML + '<img src="' + imagename + '"></div>';
194trail.obj.innerHTML = newHTML;
195trail.style.visibility="visible";
196}
197}
198}