Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with adding fadiIn/fadeOut to Image Hover

    How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript?
    The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on.

    Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated.

    Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com

    I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob

    Here is the script from the jscript_imagehover.js file...
    Code:
    var offsetfrommouse=[20,20]; //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;
    var vpos;
    //Detect IE
    var stIsIE = /*@cc_on!@*/false;
    //detect opera
    var isOpera =
        window.opera?1:0;
    // Detect Webkit browsers
    var isWebKit =
      navigator.userAgent.indexOf("AppleWebKit") > -1;
    
    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(){
    if (isWebKit){
      return document.body;
      }else if (isOpera) {
      return document.documentElement;
      }else{
      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 (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];
    if (stIsIE){
      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);
    }
    else
    {
      var docwidth=pageXOffset+window.innerWidth-15;
      var docheight=Math.min(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; // original code replaced to work with Opera
    //      relativeY = e.y; // original code replaced to work with Opera
          relativeX = event.offsetX;
          relativeY = event.offsetX;
        }
        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));
          // returning different values for ff and (opera and webkit) - fixed 12th june 2010
        } else {
          ycoord += e.pageY;
        }
    
      } else if (typeof window.event != "undefined"){ // Seems to be IE
        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;
        }
    /* 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;
        }
      }
    
      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
    if (stIsIE){
      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);
    }else{
      var docwidth=pageXOffset+window.innerWidth-15;
      var docheight=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";
    
      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";
        }
      }
    }
    Last edited by fullspecweb; 09-15-2011 at 05:53 AM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •