expand image inside a table ?

gerble1000 · 07-02-2012, 09: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, 09:12 PM

If the image is taking up 50% of the TD, or less, yes.

gerble1000 · 07-02-2012, 09:24 PM

what if it is taking up 100% of the td. is that a definate no

Old Pedant · 07-03-2012, 01: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, 07:05 AM

so the plan is to put another div layer ontop abd once mousover expand that image

Old Pedant · 07-03-2012, 08:50 PM

Yes. But see my warnings about the difficulties you will encounter. How do you WANT to solve them?

gerble1000 · 07-03-2012, 08: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, 10: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, 10: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, 10: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

Old Pedant · 07-04-2012, 02: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, 07: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, 01:24 PM

Code:

<!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, 12: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, 07:25 AM

wow i didnt expect you to do the whole thing for me. thankyou.
i will have a play after work