IH2 - How to fix IE showtrail rollover, and add prod desc to alt?

[multitech]

Greetings.


After scouring the net for a few hours and reading all the posts, I am amazed there does not seem to be a fix for the Image Handler 2 showtrail() and followmouse() javascript functions. The rollover works great in Mozilla, but in IE as you scroll further down the page, the rollover eventually moves so far away from the actual mouse pointer that you hover over the image and can't even see the pop-up. I've seen plenty of people with the same problem, but NO solutions. Am I missing something here or does anybody know a fix for this? I'm willing to do anything even if its really complicated.

Additionally, I scoured the code for a good bit and I'm unable to find the point at which the code actually passes the $alt description to the showtrail() function. In other words, normally when you hover-over, you will see the title of the product above the image. I'd like to add the product description to this but am having great difficulty. I searched for all the instances of $alt, and tried to see where $alt was being assigned a value, or if I could just insert in the product description right after the $alt, but the product description is not passed to the page I try to reference it.. The actual code where I change the $alt is here: Around line 700 of bmz_image_handler.class.php .

// we should parse old parameters here and possibly merge some inc case they're duplicate
$parameters .= ($parameters != '') ? ' ' : '';

return $parameters . $ihConf['watermark']['gravity'] . ' style="position:relative" onmouseover="showtrail(' . "'$products_image_zoom', '$alt', $width, $height, $zoomwidth, $zoomheight, this," . $this->zoom['startx'].', '.$this->zoom['starty'].', '.$this->zoom['width'].', '.$this->zoom['height'].');" 
onmouseout="hidetrail();" ';

I want to just add in something like this:

"....image_zoom', '$alt - $desc', $width, $height...."

So does anybody know how I can reference the product description or pass it into this function so I can use it? Sorry to be so long and winded but I really spent a while looking for how to do this and I'm sure others have had the same problem.

I should also note there is a small bug, the showtrail() will not work if there is an ' in the title/alt text. The popup/rollover will not fire for that item if this is in there.

Thanks in advance for your time and any help you can lend.

Jim

[doodlebee]

I'm having the same issue. For the record, he's working on it.

[multitech]

Thanks for the update doodle.

When I did try to fix the code, I ran into another problem. I used dynamic CSS side menus for my categories, and unfortunately the images appeared in front of the CSS menus.

So I switched to a new javascript image tooltip, called DOM Tooltip.

http://www.mojavelinux.com/projects/domtooltip/

All I did was replace the javascript imagehandler with this:
onmouseover="domTT_activate(this, event, 'caption', 'Examplename', 'content', '<br /><img src="bmz_cache/1/1/temp.jpg" />', 'trail', true, 'offsetY', 25);

And it worked great. It is working great and does not have the problems in IE I was experiencing. I would highly recommend it.

MultiTech Group
http://www.multitech-group.com

[doodlebee]

My hero! I'll be giving that a try straightaway :)

Thanks!

[doodlebee]

Ahh well - I can't get it to work, either. I must be looking at something weird. By "javascript imagehandler", you mean the javascript that's found in "includes/templates/TEMPLATE/jscript/jscript_imagehover.js"....right?

That's not taking for me. Form what I can read on the documentation, I need to have the tooltip "domTT.js" to replace the previously mentioned file, and then I need the code you supplied above to replace the regular IH2 code...but I can't find where *that* file is to place in the new code.

Am I wrong in my line of thought? If so, can you clarify your instructions, please?

[rxalex]

Anyone have any idea's in how to fix this issue yet?

[AaronL]

Bump.

I'm having this issue in all IE versions.

In Safari, the popup images only pop up at the top of the page making it useless as you progress down the page.

I'm using jscript_imagehover.js (see the code below) and getting an error in IE that says "clientY is NULL or not an object". I've searched the forums and nothing really seems to apply to me.

I'm using Zen Cart 1.3.8a, by the way.

This is extremely frustrating. Thanks for any advice.

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger ([email protected]) for use with
image handler 2 and better cross browser functionality
*/

var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;	// maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;


if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}

function getObj(name) {
  if (document.getElementById) {
  	  this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}

function gettrail(){
  return new getObj("trailimageid");
}

function truebody(){
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
	zoomimg_w=zoomimgwidth;
	zoomimg_h=zoomimgheight;
  //if (oriwidth > 0){ offsetfrommouse[0] = oriwidth; }
  //if (oriheight > 0){ offsetfrommouse[1] = -1 *(zoomimgheight-oriheight)/2 - 40; }
  // alert (offsetfrommouse[0] + "," + offsetfrommouse[1]);
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  document.onmousemove=followmouse;
}

function hidetrail(){
  trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function followmouse(e){

  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];

  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

  //if (document.all){
  //	trail.obj.innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
  //} else {
  //	trail.obj.innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
  //}
  var relativeX = null;
  var relativeY = null;
	
  if (typeof e != "undefined"){
    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
      relativeX = e.layerX;
      relativeY = e.layerY;
    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
      relativeX = e.x;
      relativeY = e.y;
    }

    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += e.pageX;
    }
    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
    } else {
      ycoord += e.pageY;
    }
  } else if (typeof window.event != "undefined"){
    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
      relativeX = event.x;
      relativeY = event.y;
    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
      relativeX = event.offsetX;
      relativeY = event.offsetY;
    }

    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += truebody().scrollLeft+event.clientX;
    }
    if (docheight - event.clientY < zoomimg_h + (2 * padding)){
      ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
    } else {
      ycoord += truebody().scrollTop + event.clientY;
    }
  } 

  trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
  trail.style.left=xcoord+"px";
  trail.style.top=ycoord+"px";
//	alert (trail.style.left+","+trail.style.top);

  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
}

[AaronL]

bumpity bump bump.

bump bump.

[AaronL]

Found a fix that improves things (no error in IE) but the popups occur too far up the page. Seems to be this way in Safari too. Bummer. It'd be real nice if we could fix this bug.

Real nice.....

All fixed you changed the wrong lines

Here is what its supposed to look like

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger ([email protected]) for use with
image handler 2 and better cross browser functionality
*/

var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;	// maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;


if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}

function getObj(name) {
  if (document.getElementById) {
  	  this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}

function gettrail(){
  return new getObj("trailimageid");
}

function truebody(){
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
	zoomimg_w=zoomimgwidth;
	zoomimg_h=zoomimgheight;
  //if (oriwidth > 0){ offsetfrommouse[0] = oriwidth; }
  //if (oriheight > 0){ offsetfrommouse[1] = -1 *(zoomimgheight-oriheight)/2 - 40; }
  // alert (offsetfrommouse[0] + "," + offsetfrommouse[1]);
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  document.onmousemove=followmouse;
}

function hidetrail(){
  trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function followmouse(e){

  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];

  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

  //if (document.all){
  //	trail.obj.innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
  //} else {
  //	trail.obj.innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
  //}
  var relativeX = null;
  var relativeY = null;
	
  if (typeof e != "undefined"){
    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
      relativeX = e.layerX;
      relativeY = e.layerY;
    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
      relativeX = e.x;
      relativeY = e.y;
    }

    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += e.pageX;
    }
    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
    } else {
      ycoord += e.pageY;
    }
  } else if (typeof window.event != "undefined"){
    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
      relativeX = event.x;
      relativeY = event.y;
    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
      relativeX = event.offsetX;
      relativeY = event.offsetY;
    }

    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += truebody().scrollLeft+event.clientX;
    }
    if (docheight - event.clientY < zoomimg_h + (2 * padding)){
      ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop));
    } else {
      ycoord += truebody().scrollTop + event.clientY;
    }
  }

  trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
  trail.style.left=xcoord+"px";
  trail.style.top=ycoord+"px";
//	alert (trail.style.left+","+trail.style.top);

  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
}

Thanks so much Merlin, and guess what? I found this other change and applied it before reading your suggestion:

Re: Image Handler 2 Support

--------------------------------------------------------------------------------

Hi
I may have found a fix for the bad behaviour of ie6 by pushing the zoom image too high nearly off the page, when clicking on images at the bottom end of a lot of picture product listings.

Its a simple mod to the ih2 jscript file...
http://forums.breakmyzencart.com/t10...om-images.html
I remember the odd post here a while back, similarly complaining the zoom window goes too high sometimes
##############################___
1.3.7 at last... on my hareslade site http://www.hareslade.com/zc/index.php

Here is another link to it: http://forums.breakmyzencart.com/t10...om-images.html

And to make triple sure that this fix, plus the one Merlin just put up is captured in one spot, here is the actual fix I applied:

Code:
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
//ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
} else {
ycoord += ie_offset + truebody().scrollTop + event.clientY;


So, I am going to try the one that Merlin posted for me as well, but this the problem is officially fixed for me.

Thanks for all the help everyone, and especially to Merlin and Hareslade.

Oh, and off topic: I am soooo glad I switched my server from Powweb to Camelot The speed blows away the glacial site that I had before, and the service is excellent.

Todd

[chickenrun]

I have found a way to get this throught.
Modify "jscript_imagehover.js",change line 127:

ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));

to:

ycoord += event.clientY - (0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop);

If this helps you,can you please place my link on your site?www.mybijini.comMy shop just opening and i need exchange links.