...

View Full Version : Image expand/zoom script problem



coidn
06-28-2012, 04: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...



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, 04: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.


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, 06:30 PM
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.


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, 08:07 PM
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'



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum