CodingForums.com - Image expand/zoom script problem

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Image expand/zoom script problem (http://www.codingforums.com/showthread.php?t=266497)

Image expand/zoom script problem

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 ....

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.

Quote:

Originally Posted by DrDOS (Post 1245788)

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..

Quote:

Originally Posted by coidn (Post 1246002)

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'