Foros del Web » Programando para Internet » Javascript »

tjpzoom.js no me funciona en firefox pero si en IE y chrome

 Estas en el tema de tjpzoom.js no me funciona en firefox pero si en IE y chrome en el foro de Javascript en Foros del Web. Hola buenas chicos!! tengo el siguiente script en mi página y me ha surgido un problema que cuando lo pruebo en firefox no me funciona.... ...
  #1 (permalink)  
Antiguo 05/10/2011, 01:24
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 6 meses
Puntos: 3
tjpzoom.js no me funciona en firefox pero si en IE y chrome
Hola buenas chicos!!

tengo el siguiente script en mi página y me ha surgido un problema que cuando lo pruebo en firefox no me funciona.... cuando paso la lupa por encima de la imagen la imagen se me desaparece y el IE y los demas navegadores me funciona.

1ª parte del script:
Código Javascript: 
Ver original
  1. function TJPzoomswitch(obj) {
  2.  TJPon[obj]=((TJPon[obj])?(0):(1));
  3.  return TJPon[obj];
  4. }
  5.  
  6. function TJPzoomif(obj,highres) {
  7.  if(TJPon[obj]) {TJPzoom(obj,highres);}
  8. }
  9.  
  10. function TJPzoom(obj,highres) {
  11.  if(!obj.style.width) {
  12.   if(obj.width > 0) {
  13.    //educated guess
  14.    obj.style.width=obj.width+'px';
  15.    obj.style.height=obj.height+'px';
  16.   }
  17.  }
  18.  if(typeof(highres) != typeof('')) {highres=obj.src}
  19.  var TJPstage=document.createElement("div");
  20.  TJPstage.style.width=obj.style.width;
  21.  TJPstage.style.height=obj.style.height;
  22.  TJPstage.style.overflow='hidden';
  23.  TJPstage.style.position='absolute';
  24.  if(typeof(TJPstage.style.filter) != typeof(nosuchthing)) {
  25.   //hi IE
  26.   if(navigator.appVersion.indexOf('Mac') == -1) { //hi Mac IE
  27.    TJPstage.style.filter='alpha(opacity=0)';
  28.    TJPstage.style.backgroundColor='#ffffff';
  29.   }
  30.  } else {
  31.   //hi decent gentlemen
  32.   TJPstage.style.backgroundImage='transparent';
  33.  }
  34.  TJPstage.setAttribute('onmousemove','TJPhandlemouse(event,this);');
  35.  TJPstage.setAttribute('onmousedown','TJPhandlemouse(event,this);');
  36.  TJPstage.setAttribute('onmouseup','TJPhandlemouse(event,this);');
  37.  TJPstage.setAttribute('onmouseout','TJPhandlemouse(event,this);');
  38.  if(navigator.userAgent.indexOf('MSIE')>-1) {
  39.   TJPstage.onmousemove = function() {TJPhandlemouse(event,this);}
  40.   TJPstage.onmousedown = function() {TJPhandlemouse(event,this);}
  41.   TJPstage.onmouseup = function() {TJPhandlemouse(event,this);}
  42.   TJPstage.onmouseout = function() {TJPhandlemouse(event,this);}
  43.  }
  44.  obj.parentNode.insertBefore(TJPstage,obj);
  45.  
  46.  TJPwin=document.createElement("div");
  47.  TJPwin.style.width='0px';
  48.  TJPwin.style.height='0px';
  49.  TJPwin.style.overflow='hidden';
  50.  TJPwin.style.position='absolute';
  51.  tw1='<div style="position:absolute;overflow:hidden;margin:';
  52.  TJPwin.innerHTML= 
  53.  tw1+TJPshadowthick+'px 0 0 '+TJPshadowthick+'px; background-color:'+TJPbordercolor+'; width:'+(TJPzoomwidth-TJPshadowthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2)+'px"></div>' +
  54.  tw1+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px; width:'+(TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2-TJPborderthick*2)+'px;"><img src="'+highres+'" style="margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" '+((highres != obj.src)?('onload="if(this.parentNode) {this.parentNode.parentNode.getElementsByTagName(\'div\')[2].style.display=\'none\';}"'):(''))+'/></div>';
  55.  if(highres != obj.src) {
  56.   TJPwin.innerHTML+='<div style="position:absolute; margin:'+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px;">'+TJPloading+'</div>';
  57.  }
  #2 (permalink)  
Antiguo 05/10/2011, 01:24
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: tjpzoom.js no me funciona en firefox pero si en IE y chrome
2ª parte del script
Código Javascript: 
Ver original
  1. if(TJPshadowthick>0) {
  2.   st1='<span style="position:absolute; display:inline-block; margin: ';
  3.   st2='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src='
  4.   st3='filter:alpha(opacity=0);margin:0;padding:0;border:0;"/></span>';
  5.   TJPwin.innerHTML+=
  6.   st1+'0 0 0 0    ; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'nw.png\')"><img src="'+TJPshadow+'nw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  7.   st1+'0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'ne.png\')"><img src="'+TJPshadow+'ne.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  8.   st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'sw.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'sw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  9.   st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'se.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'se.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  10.   st1+'0 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'n.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'n.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  11.   st1+''+(TJPshadowthick*2)+'px 0 0 0; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'w.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'w.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +
  12.   st1+''+(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'e.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'e.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +
  13.   st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'s.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'s.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3;
  14.  
  15.  }
  16.  ;
  17.  //marker - zoomer
  18.  obj.parentNode.insertBefore(TJPwin,TJPstage);
  19. }
  20.  
  21.  
  22. function TJPfindposy(obj) {
  23.  var curtop = 0;
  24.  if(!obj) {return 0;}
  25.  if (obj.offsetParent) {
  26.   while (obj.offsetParent) {
  27.    curtop += obj.offsetTop
  28.    obj = obj.offsetParent;
  29.   }
  30.  } else if (obj.y) {
  31.   curtop += obj.y;
  32.  }
  33.  return curtop;
  34. }
  35.  
  36. function TJPfindposx(obj) {
  37.  var curleft = 0;
  38.  if(!obj) {return 0;}
  39.  if (obj && obj.offsetParent) {
  40.   while (obj.offsetParent) {
  41.    curleft += obj.offsetLeft
  42.    obj = obj.offsetParent;
  43.   }
  44.  } else if (obj.x) {
  45.   curleft += obj.x;
  46.  }
  47.  return curleft;
  48. }
  49.  
  50.  
  51. function TJPhandlemouse(evt,obj) {
  52.  var evt = evt?evt:window.event?window.event:null; if(!evt) { return false; }
  53.  if(evt.pageX) {
  54.   nowx=evt.pageX-TJPfindposx(obj)-TJPadjustx;
  55.   nowy=evt.pageY-TJPfindposy(obj)-TJPadjusty;
  56.  } else {
  57.   if(document.documentElement && document.documentElement.scrollTop) {
  58.    nowx=evt.clientX+document.documentElement.scrollLeft-TJPfindposx(obj)-TJPadjustx;
  59.    nowy=evt.clientY+document.documentElement.scrollTop-TJPfindposy(obj)-TJPadjusty;
  60.   } else {
  61.    nowx=evt.x+document.body.scrollLeft-TJPfindposx(obj)-TJPadjustx;
  62.    nowy=evt.y+document.body.scrollTop-TJPfindposy(obj)-TJPadjusty;
  63.   }
  64.  }
  65.  if(evt.type == 'mousemove') {
  66.   TJPsetwin(obj,nowx,nowy);
  67.  } else if(evt.type == 'mousedown') {
  68.   TJPmouse=1;
  69.   TJPmousey=nowy;
  70.  } else if(evt.type =='mouseup') {
  71.   TJPmouse=0;
  72.  } else if(evt.type =='mouseout') {
  73.   if(navigator.appVersion.indexOf('Mac') == -1 || navigator.appVersion.indexOf('MSIE') == -1) { //hi Mac IE
  74.    x=obj.parentNode;
  75.    x.removeChild(x.getElementsByTagName('div')[0]);
  76.    x.removeChild(x.getElementsByTagName('div')[0]);
  77.   }
  78.  }
  79. }
  80.  
  81.  
  82. // TJPzoom 3 * János Pál Tóth
  83. // Docs @ http://valid.tjp.hu/tjpzoom/ 
  84. // News @ http://tjpzoom.blogspot.com/
  85.  
  86.  
  87. function TJPsetwin(obj,nowx,nowy) {
  88.  stage=obj.parentNode.getElementsByTagName('div')[0];
  89.  if(TJPmouse == 1) {
  90.   if(Math.abs(nowy-TJPmousey) >= 1) {
  91.    TJPzoomamount*=((nowy>TJPmousey)?(0.909):(1.1));
  92.    TJPmousey=nowy;
  93.    if(TJPzoomamount < TJPzoomamountmin) {TJPzoomamount=TJPzoomamountmin;}
  94.    if(TJPzoomamount > TJPzoomamountmax) {TJPzoomamount=TJPzoomamountmax;}
  95.    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width=  parseInt(obj.style.width)*TJPzoomamount+'px';
  96.    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height=  parseInt(obj.style.height)*TJPzoomamount+'px';
  97.   }
  98.  }
  99.  stage.style.marginLeft=nowx-TJPzoomoffsetx+'px';
  100.  stage.style.marginTop=nowy-TJPzoomoffsety+'px';
  101.  clip1=0; clip2=TJPzoomwidth; clip3=TJPzoomheight; clip4=0;
  102.  nwidth=TJPzoomwidth; nheight=TJPzoomheight;
  103.  if(nowx-TJPzoomoffsetx < 0) {
  104.   clip4=TJPzoomoffsetx-nowx;
  105.  } else if(parseFloat(nowx-TJPzoomoffsetx+TJPzoomwidth) > parseFloat(obj.style.width)) {
  106.   clip2= TJPzoomoffsetx - nowx + parseFloat(obj.style.width);
  107.   nwidth=TJPzoomoffsetx-nowx+parseInt(obj.style.width)+TJPborderthick;
  108.  }
  109.  
  110.  if(nowy-TJPzoomoffsety < 0) {
  111.   clip1=TJPzoomoffsety-nowy;
  112.  } else if(parseFloat(nowy-TJPzoomoffsety+TJPzoomheight) > parseFloat(obj.style.height)) {
  113.   clip3= TJPzoomoffsety - nowy + parseFloat(obj.style.height)
  114.   nheight=TJPzoomoffsety - nowy + parseFloat(obj.style.height)+TJPborderthick;
  115.  }
  116.  stage.style.width=nwidth+'px';
  117.  stage.style.height=nheight+'px';
  118.  stage.style.clip='rect('+clip1+'px,'+clip2+'px,'+clip3+'px,'+clip4+'px)';
  119.  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginLeft=TJPzoomamount*(TJPzoomoffsetx-TJPzoomwidth/2-nowx)+TJPzoomwidth/2-TJPborderthick-TJPshadowthick+'px';
  120.  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginTop =TJPzoomamount*(TJPzoomoffsety-TJPzoomheight/2-nowy)+TJPzoomheight/2-TJPborderthick-TJPshadowthick+'px';
  121. }
  122.  
  123. function TJPinit() {
  124.  TJPadjustx=0; TJPadjusty=0;
  125.  if(navigator.userAgent.indexOf('MSIE')>-1) {TJPadjustx=2;TJPadjusty=2;}
  126.  if(navigator.userAgent.indexOf('Opera')>-1) {TJPadjustx=0; TJPadjusty=0;}
  127.  if(navigator.userAgent.indexOf('Safari')>-1) {TJPadjustx=1; TJPadjusty=2;}
  128. }
  129.  
  130. // configuration - do not modify the following, instead read the behaviors.html file in the tutorial!
  131. var TJPon=new Array();
  132. var TJPadjustx,TJPadjusty;
  133. var TJPmouse=0; var TJPmousey;
  134. var TJPloading='<div style="background-color: #ffeb77; color: #333333; padding:2px; font-family: verdana,arial,helvetica; font-size: 10px;">Loading...</div>';
  135.  
  136. var TJPzoomwidth=160;
  137. var TJPzoomheight=120;
  138.  
  139. var TJPzoomoffsetx=TJPzoomwidth/2;
  140. var TJPzoomoffsety=TJPzoomheight/2;
  141.  
  142. var TJPzoomamount=4;
  143. var TJPzoomamountmax=12;
  144. var TJPzoomamountmin=1;
  145.  
  146. var TJPborderthick=2;
  147. var TJPbordercolor='#cccccc';
  148.  
  149. var TJPshadowthick=8;
  150. var TJPshadow='images/dropshadow/';
  151.  
  152. TJPinit();
  #3 (permalink)  
Antiguo 05/10/2011, 01:27
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: tjpzoom.js no me funciona en firefox pero si en IE y chrome
y la parte del html

Código HTML: 
Ver original
  1. <div id="cont">
  2.   <img src="imagenes/imagen-fondo1.jpg" style="width:1024px; height:768px;" onmouseover="TJPzoom(this, 'imagenes/imagen-fondo2.jpg');" />
  3.   </div>

Etiquetas: chrome, firefox, funcion, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:40.