Image expand/zoom script problem

coidn · 06-28-2012, 03:15 AM

Hello dear codingforums members...
This is my first post,

I have this script which is used to expand/zoom an image to make it look larger..
But it only works in IE but not in Firefox or Google Chrome... Can anyone have a look and help out...

I came to know that img.style.width=obj.width*2; is not supported in chrome and fire...

So if there is some alterations I could make to the code...

Code:

function Large(obj)
{
  debugger;
 
    var imgbox=document.getElementById("imgbox");
    imgbox.style.visibility='visible';
    var img = document.createElement("img");
    var statusbar = document.createElement("span");
    var Urlstr=obj.alt;
    img.src=obj.src;//replace("_th.jpg","_pr.jpg");
    img.style.width=obj.width*2;
    img.style.height=obj.height*2;
   

  document.getElementById('<%=hdnInfoUrl.ClientID%>').value=Urlstr;
  
    if(img.addEventListener){
        img.addEventListener('mouseout',Out,false);
        
    } else {
        img.attachEvent('onmouseout',Out);
       img.attachEvent('onclick',ClickThis);
    }             
    imgbox.innerHTML='';
    imgbox.appendChild(img);
    imgbox.style.left=(getElementLeft(obj)-50) +'px';
    imgbox.style.top=(getElementTop(obj)-50) + 'px';
    // add span
    statusbar.innerHTML = "<p>Other Image Details Text</p>";
    imgbox.appendChild(statusbar);
}

function Out()
{
document.getElementById("imgbox").style.visibility='hidden';
}

So there is a hidden div with id=imgbox on the html page, when mouse is hovered on a thumbnail,this div gets visible and the image is increased in width and height and displayed...when on mouse out its invisible... works in IE ....

DrDOS · 06-28-2012, 03:34 AM

See how I have added a line here. This is the code you need to include for FF and other browsers. And I also added for the hidden part.

Code:

imgbox.style.visibility='visible';
imgbox.style.display = 'block';
This is for the hidden.
imgbox.style.visibility='hidden';
imgbox.style.display = 'none';

You're welcome.

coidn · 06-28-2012, 05:30 PM

Quote:

Originally Posted by DrDOS

See how I have added a line here. This is the code you need to include for FF and other browsers. And I also added for the hidden part.

Code:

imgbox.style.visibility='visible';
imgbox.style.display = 'block';
This is for the hidden.
imgbox.style.visibility='hidden';
imgbox.style.display = 'none';

You're welcome.

Hi... thank you...

It wasnt exactly what i needed but helped me to understand what had to be done...

ff and chrome cant understand "imgbox.style.width"
they only need to be converted to "imgbox.width" for the zooming effect to work on ff and chrome..

DrDOS · 06-28-2012, 07:07 PM

Quote:

Originally Posted by coidn

Hi... thank you...

It wasnt exactly what i needed but helped me to understand what had to be done...

ff and chrome cant understand "imgbox.style.width"
they only need to be converted to "imgbox.width" for the zooming effect to work on ff and chrome..

Not exactly, when you use obj.style.width you have to use the +'px'; along with it.

obj.style.width = 300+'px';

I can't tell you how many times I've been caught out by forgetting to include the +'px'