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.
Results 1 to 2 of 2
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    smoother image transformation on hover help.

    Hi,

    I have a series of thumbnails on my page in a column.

    I want to make it so that when I hover on each, a larger version displays over the thumbnail. I want the right hand side of the enlargement and the top, to be in the same place as the corresponding sides of the thumbnail.

    I could achieve something like what I want with css (suckerfish), but I want the transformation to look like the thumbnail is growing into the enlarged size.

    Can anyone point me to a script or tutorial that can do this, plz

    bazz

    xhtml
    Code:
          <table>
            <tr>
         
              <td class="image">
                <img src="domain.com/images/logo1.jpg" alt="" />
              </td>
              <td>
                <dl>
                <dt><a href="domain.com/file">Jims chippy</a></dt>
    
                <dd class="first">other data</dd>
                <dd>more data</dd>
                </dl>
               </td>
             </tr>
           </table>
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I found this script but it seems to have a bug now. (originally posted in 2005).

    In FF, if I enlarge an image and then click it again, it doesn't return to its original thumb size. Instead, it returns to a 50px wide image. - roughly. tiny anyway and not the original size.

    Can anyone help with two bits.

    1. making sire the image returns to its original size and
    2. when it enalrges, it needs to be on a different 'z-index/layer' so as not to move the other page content around.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>56111</title>
    		<meta name="description" content="Gradual image enlarge/shrink toggle on click">
    
    		<style type="text/css">
    			#images
    			{
    				list-style:none;
    				padding:0;
    			}
    			#images img
    			{
    				width:100px;
    				border:1px solid #000;
    			}
    		</style>
    	</head>
    	<body>
    		<p>
    			Click an image to enlarge.
    		</p>
    
    		<table id="images"><tr>
    			<td><img src="images/image01.jpg" alt="Image 1"></td>
    			<td> This is a load of text</td>
    			</tr>
    			<tr>
    			<td><img src="images/image02.jpg" alt="Image 2"></td>
    			<td>This is a load more text</td>
    			</tr>
    			<tr>
    			<td><img src="images/image03.jpg" alt="Image 3"></td>
    			<td>And here is another load of words.</td>
    			</tr>
    			<tr>
    			<td><img src="images/image04.jpg" alt="Image 4"></td>
    			<td>And yet more text</td>
    			</tr>
    		</table>
    
    		<script type="text/javascript">
    			var resizeRate = 26;
    
    			var images = document.getElementById('images').getElementsByTagName('img');
    
    			for(var i = 0; i < images.length; i++)
    			{
    				// IE fix
    				if(document.addEventListener)
    				{
    					images[i].addEventListener('click', function(){this.changeState()}, true);
    				}
    				else
    				{
    					images[i].attachEvent('onclick', function(){this.changeState()});
    				}
    				images[i].changeState = changeState;
    				images[i].resize = resize;
    				images[i].state = 'min';
    				images[i].originalWidth = images[i].width;
    
    				// IE fix
    				if(images[i].naturalWidth == null)
    				{
    					images[i].naturalWidth = '500';
    				}
    			}
    
    			function changeState(state)
    			{
    				// IE fix
    				if(this.style == null)
    				{
    					thisObj = window.event.srcElement;
    				}
    				else
    				{
    					thisObj = this;
    				}
    
    				if(state == null)
    				{
    					switch(thisObj.state)
    					{
    						case 'shrink':
    						{
    							thisObj.state = 'min';
    							break;
    						}
    						case 'grow':
    						{
    							thisObj.state = 'max';
    							break;
    						}
    						case 'max':
    						{
    							thisObj.state = 'shrink';
    							break;
    						}
    						default:
    						{
    							thisObj.state = 'grow';
    							break;
    						}
    					}
    				}
    				else
    				{
    					thisObj.state = state;
    				}
    				thisObj.resize();
    			}
    
    			function resize()
    			{
    				// IE fix
    				if(this.style == null)
    				{
    					thisObj = window.event.srcElement;
    				}
    				else
    				{
    					thisObj = this;
    				}
    
    				switch(thisObj.state)
    				{
    					case 'grow':
    					{
    						thisObj.style.width = (thisObj.width + resizeRate) + 'px';
    						if(thisObj.width >= thisObj.naturalWidth)
    						{
    							thisObj.style.width = thisObj.naturalWidth + 'px';
    							thisObj.changeState('max');
    						}
    						break;
    					}
    					case 'shrink':
    					{
    						thisObj.style.width = (thisObj.width - resizeRate) + 'px';
    						if(thisObj.width <= thisObj.originalWidth)
    						{
    							thisObj.style.width = thisObj.originalWidth + 'px';
    							thisObj.changeState('min');
    						}
    						break;
    					}
    				}
    
    				if(thisObj.state == 'grow' || thisObj.state == 'shrink')
    				{
    					setTimeout(function(){thisObj.resize()}, 50);
    				}
    			}
    		</script>
    	</body>
    </html>
    I will appreciate any help you might give.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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