Mouseover Image enlarge effect Options

[diana]

Hi, I'm trying to create the effect such as that istockphoto.com uses when mouse over the image, a larger image shows up.

I have this for the javascript

CODE

/*
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 (tim@breakmyzencart.com) 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 = 550;    // 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";
    }
  }
}

this for my mouseover on the image

CODE

<A href="<?php ProductInfoLink(); ?>" onmouseover="showtrail('<?php ProductLargeImageSrc(); ?>','<?php ProductName(); ?>','','','','','1',);" onmouseout="hidetrail();"><?php ProductSmallImage(); ?></A>

I have inserted the javascript

CODE

<script language="javascript" src="javascript/filesearchhover.js" type="text/javascript"></script>

on all the headers, so what is it that I'm doing wrong?

[Alex Girin]

Hello Diana,

Thank you for your inquiry.

Could you provide the URL of your Storefront. We will check your issue.

Best Regards,
Alex Girin
Avactis Shopping Cart Team

[diana]

Yes, it's www.jglennphotography.com/shop

[diana]

Ok, here's what I did. I changed a script, and this one works, but I need the hover image to be smaller. I don't know javascript, so can someone take a look at the file and let me know where I can tell it to have the hover image to be 50% of the size of the actual large image?

Here is my code:

CODE

<script>
//This and others free scripts you can find on a site: artdhtml.com

ns4=(navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? 1 : 0;
ie4=(document.all && !document.getElementById)? 1 : 0;
ie5=(document.getElementById && document.all)? 1 : 0;
ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? 1: 0;
w3c=(document.getElementById)? 1 : 0;

wid=(ie4||ie5)?window.document.body.clientWidth-20:window.innerWidth-36

if(ns4){document.write ('<layer name="di1"></layer>')}else{document.write ('<div id="di1" style="position:absolute;z-index:100" ></div>')}

outd=""

if(w3c)div1=document.getElementById('di1')
if(ie4)div1=document.all['di1']
if(ns4)div1=document.layers['di1']

function move_div(x,y){
    if (isNaN(x+y))return
    if(ns4){div1.moveTo(x,y)}else{div1.style.left=x+'px';div1.style.top=y+'px';}
}

function write_div(text){
    if(ns4){
        div1.document.open();
        div1.document.write(text);
        div1.document.close();
    }
    else {div1.innerHTML=text;}
}

function big(n){
ondiv=n
        write_div("<a href=java script:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border=0 name=ib src="+n+"></a>");
        move_div(x,y)
}

function big_hide(){
    ondiv=0;
    t3=window.setTimeout('big_hide2()',100)
}

function big_hide2(){
if (ondiv==0){
    write_div("");
    move_div(-1000,-1000)}
}

y=x=0
function dragIt(evt){if(ie4||ie5){x=window.event.clientX+document.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}else {x=evt.pageX; y=evt.pageY }}

document.onmousemove = dragIt
if(ns4){document.captureEvents( Event.MOUSEMOVE )}


</script>

            <A href="<?php ProductInfoLink(); ?>" onmouseover="big('<?php ProductLargeImageSrc(); ?>')" onmouseout="big_hide()"><?php ProductSmallImage(); ?></A>
            <div class="product_price"><?php ProductSalePrice(); ?></div>

This is the link: http://www.jglennphotography.com/shop/stor...egory-id35.html

[Jacob]

Diana,

I think it would be this function:

CODE

function big(n){
ondiv=n
        write_div("<a href=java script:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border=0 name=ib src="+n+"></a>");
        move_div(x,y)
}

in particular the <img border=0 name=ib src="+n+">. If you know that your large image is going to be 670 x 568 every time, then to make it 50%, you could try <img border=0 name=ib width=284 height=335 src="+n+">. That should hard-code the roll-over image to those dimensions.

I notice that you've also included that script twice on that page (once for each image). That shouldn't be necessary - you should be able to place the script code up in the header of the page, so that it only appears once. Or better still, try adding it to your javascript/main.js file, and see if it works.

That way, you'll be cutting down on the amount of code generated for each page, particularly if you had a page with 20 pictures, for example.

Hope this helps!

[diana]

Thanks Jacob, that is the solution. However, on different point of the picture that I move my mouse to, the picture would change sizes. Not all the picture are at 670x568, so I did the percent for the height and the width, could that be the problem? Please take a look.

http://www.jglennphotography.com/shop/stor...egory-id35.html

Somehow linking the javascript doesn't work, that's why I have it inserted on the page.

[Jacob]

Diana,

Yes I see what you mean, it starts off at the 100% size, and then resizes it to 50%, and then sometimes switches back, which isn't very good.

I'm really not sure how else to fix it, other than setting the width and height to values, rather than 50%, and see how that goes.

Cheers

Jacob