Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts

    expand image inside a table ?

    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

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    If the image is taking up 50% of the TD, or less, yes.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    what if it is taking up 100% of the td. is that a definate no

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    so the plan is to put another div layer ontop abd once mousover expand that image

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Yes. But see my warnings about the difficulties you will encounter. How do you WANT to solve them?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    gerble1000 (07-06-2012)

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    wow i didnt expect you to do the whole thing for me. thankyou.
    i will have a play after work


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •