...

View Full Version : expand image inside a table ?



gerble1000
07-02-2012, 10:01 PM
is it possible to enlarge an image by 50% onmousover when it is in a table td and i do not want to affect the rest of the table layout.
i am after a rollover effect for images :)

WolfShade
07-02-2012, 10:12 PM
If the image is taking up 50% of the TD, or less, yes.

gerble1000
07-02-2012, 10:24 PM
what if it is taking up 100% of the td. is that a definate no

Old Pedant
07-03-2012, 02:28 AM
Pardon me, but Wolfshade's answer is dead wrong.

You can do it pretty easily, actually, but using a "POPON" <div> that you make appear right over the <td>.

Now...there is a a problem: Once the popon appears, it will hide the <td> and the original <img>, so immediately the mouse is no longer "over" either of them and so if you also have onmouseout to hide the popon, it will be hidden. At which point the mouse will again be over the <td> and it will popon again. At which point...

So the "trick" is to decide how to handle the onmouseout. You *could* simply do onmouseout of the enlarged image, but if it's 50% bigger than the original <td> that means it will be slopping over into the adjacent <td>s.

So...how do you think you want to handle the onmouseout?

gerble1000
07-03-2012, 08:05 AM
so the plan is to put another div layer ontop abd once mousover expand that image

Old Pedant
07-03-2012, 09:50 PM
Yes. But see my warnings about the difficulties you will encounter. How do you WANT to solve them?

gerble1000
07-03-2012, 09:58 PM
im not sure but i think its worth just playing with it and see what happens.
here is a demo page i am working on.
http://www.g-e-s.co.uk
please take a look and i know the source is to much but the page works :)

Old Pedant
07-03-2012, 11:16 PM
Oh, lordy! Have you never heard of ARRAYS!

Or CSS?

I don't know if I could stand to work on that page without throwing it all away and rewriting it.

Anyway, it's sure no wonder it takes forever for your page to load.

But, yes, I can show you how to do the 1.5x image blowup without affecting the rest of the display. But as slow as this page is now, are you sure this is a good idea?

gerble1000
07-03-2012, 11:55 PM
lol
yea its a good idea.
and i have been trimming it all down with for loops and stuff.
this page used to be a lot bigger.
I'm still a newbie when it comes to JavaScripts :)
the page takes so long to load due to all the .png files i am using.
soon to be gif files which should help a bit.

gerble1000
07-03-2012, 11:59 PM
bare in mind that the adverts on there can change quantity. and size.
at the moment there is 33 adverts "images" which is the max and in the admin page i can set it to be anything under 33 and for arguments sake it could be 3 adverts then the images would already be a little larger.
so i could do with a way to expand by percentage really :thumbsup:

Old Pedant
07-04-2012, 03:03 AM
Yes, but the way you use SYNCHRONOUS AJAX to go get content may be the worst of all possible ideas. It means that you have to wait for EACH AND EVERY ONE of those tiny little text files. WHY?

Surely this page is produced via server-side code? No? PHP/ASP/JSP? If not, it certainly should be. And those PNG thumbnails are HUGE considering the small sizes of the images. What's wrong there? Are you saving them uncompressed?? Hmmm...no, guess not. Well, you could save them as GIF and they would be 40% of the PNG size, and still preserve the transparency.

I just think you are making the whole thing way over-complicated and, as a consequence, bigger and slower.

gerble1000
07-04-2012, 08:06 AM
yes your right.
i tend to find a way to do what i need to do and stick to it.
i could do with paying someone to clean the whole page up

vwphillips
07-05-2012, 02:24 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<img class="zxcMagnify;" src="http://www.g-e-s.co.uk/14/thumb1.png?=86701" width="65"/>
<img class="zxcMagnify;" src="http://www.g-e-s.co.uk/12/thumb1.png?=47462" width="65"/>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMagnify(mag,ms){
var imgs=document.body.getElementsByTagName('IMG'),obj,img,obj,z0=0;
for (;z0<imgs.length;z0++){
if (imgs[z0].className&&imgs[z0].className.indexOf('zxcMagnify;')>=0){
img=document.createElement('IMG');
img.style.position='absolute';
img.style.zIndex='101';
img.style.left='-300px';
img.style.top='-300px';
document.body.appendChild(img);
obj={img:imgs[z0],pop:img,m:mag,ms:ms,now:0};
this.addevt(imgs[z0],'mouseover','over',obj);
this.addevt(img,'mouseout','over',obj);
}
}
}

zxcMagnify.prototype={

over:function(e,o){
var p=this.pos(o.img),w=o.img.width*o.m,h=o.img.height*o.m;
o.pop.src=o.img.src;
o.pop.style.width=w+'px';
o.pop.style.height=h+'px';
o.pop.style.left=p[0]+(o.img.width-w)/2+'px';
o.pop.style.top=p[1]+(o.img.height-h)/2+'px';
this.animate(o,o.now,e.type=='mouseover'?100:0,new Date(),o.ms);
},

animate:function(o,f,t,srt,mS){
var oop=this,obj=o.pop,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
o.now=now;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else if (t==0){
obj.style.left='-300px';
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

}


new zxcMagnify(1.5,1000)

/*]]>*/
</script></body>

</html>

Old Pedant
07-06-2012, 01:02 AM
Wow! That sure all seems overly complicated, VW. I'm sure it works, as your code always does, but wow.

I would have created a single <div> that is normally not displayed. Containing an <img> of the appropriate size by with no src=

When, when the mouse is over the thumbnail image, I'd have just calculated the location of the thumbnail (using offsetTop and offsetLeft, recursively), moved the <div> to the appropriate offsets therefrom, and cloned the src of the thumbnail into the <div>s img. Finally, display the <div>.

Here, like this:
http://www.mywhizbang.com/bigger.html

gerble1000
07-06-2012, 08:25 AM
wow i didnt expect you to do the whole thing for me. thankyou.
i will have a play after work :):thumbsup:

gerble1000
07-06-2012, 11:46 AM
thanx guys i have used vw's script as its smoother but thanx anyways

gerble1000
07-06-2012, 11:48 AM
there is one flaw though.
the images had an onclick event asigned to them.
is there anyway that it could be put onto these expanded images

vwphillips
07-06-2012, 04:19 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<a href="http://www.codingforums.com/showthread.php?t=266904" ><img class="zxcMagnify;" src="http://www.g-e-s.co.uk/14/thumb1.png?=86701" width="65"/></a>
<img class="zxcMagnify;" src="http://www.g-e-s.co.uk/12/thumb1.png?=47462" width="65"/>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMagnify(mag,ms){
var imgs=document.body.getElementsByTagName('IMG'),a=document.createElement('A'),obj,img,obj,z0=0;
for (;z0<imgs.length;z0++){
if (imgs[z0].className&&imgs[z0].className.indexOf('zxcMagnify;')>=0){
img=document.createElement('IMG');
img.style.position='absolute';
img.style.zIndex='101';
img.style.left='-300px';
img.style.top='-300px';
a.appendChild(img);
if (imgs[z0].parentNode.href){
a.href=imgs[z0].parentNode.href;
img.style.borderWidth='0px';
}
document.body.appendChild(a);
obj={img:imgs[z0],pop:img,m:mag,ms:ms,now:0};
this.addevt(imgs[z0],'mouseover','over',obj);
this.addevt(img,'mouseout','over',obj);
}
}
}

zxcMagnify.prototype={

over:function(e,o){
var p=this.pos(o.img),w=o.img.width*o.m,h=o.img.height*o.m;
o.pop.src=o.img.src;
o.pop.style.width=w+'px';
o.pop.style.height=h+'px';
o.pop.style.left=p[0]+(o.img.width-w)/2+'px';
o.pop.style.top=p[1]+(o.img.height-h)/2+'px';
this.animate(o,o.now,e.type=='mouseover'?100:0,new Date(),o.ms);
},

animate:function(o,f,t,srt,mS){
var oop=this,obj=o.pop,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
o.now=now;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else if (t==0){
obj.style.left='-300px';
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

}


new zxcMagnify(1.5,1000)

/*]]>*/
</script></body>

</html>

gerble1000
07-06-2012, 07:49 PM
is there not a way for the new script to get the onclick value of the original image as href is not going to be good

vwphillips
07-07-2012, 09:21 AM
please pose the code the images with the onclick values

gerble1000
07-07-2012, 10:47 AM
i have a lot of stuff happening onload.
that will change the onclick event.
like this code here

if(i == 1){document.getElementById(row1thumnailvar2).onclick = sale1;document.getElementById(row2thumnailvar2).onclick = sale1;document.getElementById(row3thumnailvar2).onclick = sale1;}

which all depends on data in a file on the server, so all images may have a different onclick value and all <td> in the table may be showing a different image. but the image i see will have a set onclick value.
im finding it hard to explain. but you more than welcome to look at the code.
g-e-s.co.uk
:)

vwphillips
07-07-2012, 12:48 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<img id="row1thumnailvar2" class="zxcMagnify;" src="http://www.g-e-s.co.uk/14/thumb1.png?=86701" width="65"/>
<img id="row2thumnailvar2" class="zxcMagnify;" src="http://www.g-e-s.co.uk/12/thumb1.png?=47462" width="65"/>

<script type="text/javascript">
/*<![CDATA[*/

document.getElementById('row1thumnailvar2').call='sale1';
document.getElementById('row2thumnailvar2').call='sale1';

function sale1(){
alert('');
}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMagnify(mag,ms){
var imgs=document.body.getElementsByTagName('IMG'),a=document.createElement('A'),obj,img,obj,z0=0;
for (;z0<imgs.length;z0++){
if (imgs[z0].className&&imgs[z0].className.indexOf('zxcMagnify;')>=0){
img=document.createElement('IMG');
if (window[imgs[z0].call]){
img.onclick=window[imgs[z0].call];
}
img.style.position='absolute';
img.style.zIndex='101';
img.style.left='-300px';
img.style.top='-300px';
a.appendChild(img);
if (imgs[z0].parentNode.href){
a.href=imgs[z0].parentNode.href;
img.style.borderWidth='0px';
}
document.body.appendChild(a);
obj={img:imgs[z0],pop:img,m:mag,ms:ms,now:0};
this.addevt(imgs[z0],'mouseover','over',obj);
this.addevt(img,'mouseout','over',obj);
}
}
}

zxcMagnify.prototype={

over:function(e,o){
var p=this.pos(o.img),w=o.img.width*o.m,h=o.img.height*o.m;
o.pop.src=o.img.src;
o.pop.style.width=w+'px';
o.pop.style.height=h+'px';
o.pop.style.left=p[0]+(o.img.width-w)/2+'px';
o.pop.style.top=p[1]+(o.img.height-h)/2+'px';
this.animate(o,o.now,e.type=='mouseover'?100:0,new Date(),o.ms);
},

animate:function(o,f,t,srt,mS){
var oop=this,obj=o.pop,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
o.now=now;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else if (t==0){
obj.style.left='-300px';
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

}


new zxcMagnify(1.5,1000)

/*]]>*/
</script></body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum