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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Image enlarge script - Buggy

    To begin with, im a novice at this so the code probably can be more efficient or what ever but below is just what i have knocked out. The script is ment to enlarge the image by making the style width wider and the border smaller onmouseover and the same onmouseout (although i got stuck before managing to make the shrink function).

    The code has a bug it in somewhere which is annoying me! The code isnt large so im assuming it should be easy to spot. I have run a few tests, the while works, the enlarge function works althogh the script doesnt process. I think it may have something to do with the setTimeOut and the input of the id's into the function. (i tried a few experiments and i dont think the '1','2'...etc have passed into the function.

    Anyway, if anyone can help me then it would be much appreciated

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <
    head>
            <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <
    style type="text/css">
                
    #images {
                    
    background-color:#ccc;
                    
    padding:6px 3px;
                    
    text-align:center;
                }
                
    #images img {
                    
    width:120px;
                    
    height:120px;
                    
    border:8px solid white;
                    
    margin:0 3px;
                }
            </
    style>
            <
    script type="text/javascript">
            <!--
    Begin

    function expand(imageID){

        var 
    width=120
        
    var height=120
        max
    =8
        i
    =0

        
    while(i<=max){
            
    i++
            
    max--
            
    width++
            
    height++
            function 
    change(){
                
    document.getElementById('img-1').style.width=width+"px"
                
    document.getElementById('img-1').style.height=height+"px"
                
    document.getElementById('img-1').style.border=max+"px solid white"
            
    }
            var 
    t=setTimeout("change()")",500)
        }

    }
            //END-->
            </script>
        </head>
    <body>
    <div id="
    images">

        <img src="
    http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            
    id="img-1" onmouseover="expand('1')" onmouseout="shrink(1)"/>
        <
    img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            
    id="img-2" onmouseover="expand('2')" onmouseout="shrink(2)"/>
        <
    img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            
    id="img-3" onmouseover="expand('3')" onmouseout="shrink(3)"/>
        <
    img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            
    id="img-4" onmouseover="expand('4')" onmouseout="shrink(4)"/>
        <
    img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            
    id="img-5" onmouseover="expand('5')" onmouseout="shrink(5)"/>

    </
    div>

    <
    div id="text"></div>

    </
    body>
    </
    html
    This code should run straight off if you want to test it.
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This will work. You should also run your code through jslint before posting it here. Most of your statements were not terminated and several variables were declared implicitly (i have fixed this). Both are bad practices and will get you into trouble as your applications grow.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style type="text/css">
                #images {
                    background-color:#ccc;
                    padding:6px 3px;
                    text-align:center;
                }
                #images img {
                    width:120px;
                    height:120px;
                    border:8px solid white;
                    margin:0 3px;
                }
            </style>
            <script type="text/javascript">
            <!--Begin
    
    
    function expand(imageID){
    
        var width=120;
        var height=120;
        var max=8;
        var i=0;
    
        while(i<=max){
            i++;
            max--;
            width++;
            height++;
            var t=setTimeout(function() {
    		var i=i;
    	document.getElementById('img-'+imageID).style.width=width+"px";
    	document.getElementById('img-'+imageID).style.height=height+"px";
    	document.getElementById('img-'+imageID).style.border=max+"px solid #FFFFFF";
    }, 500);
        }
    
    }
            //END-->
            </script>
        </head>
    <body>
    <div id="images">
    
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-1" onmouseover="expand('1')" onmouseout="shrink(1)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-2" onmouseover="expand('2')" onmouseout="shrink(2)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-3" onmouseover="expand('3')" onmouseout="shrink(3)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-4" onmouseover="expand('4')" onmouseout="shrink(4)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-5" onmouseover="expand('5')" onmouseout="shrink(5)"/>
    
    </div>
    
    <div id="text"></div>
    
    </body>
    </html>
    Last edited by cyberlogi; 05-09-2007 at 11:24 PM. Reason: forgot 3 semi-colons and additional message to poster

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    jslint :/

    Thanks for helping me
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    atcually, a question about the script. It now works although the point of the script hasnt worked. I wanted the script to loop the width of the image and width of the border 8 times (so that the image apears to grow gradually) 1 pixel at a time. Hense the while and the setTimeOut. Am i going about this wrong?
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    nudge*?
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The function that the timeout is calling only sees the most recent value of width and height, therefore after the 500 milliseconds you see the last update only. I think the following will get the effect you want:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style type="text/css">
                #images {
                    background-color:#ccc;
                    padding:6px 3px;
                    text-align:center;
                }
                #images img {
                    width:120px;
                    height:120px;
                    border:50px solid white;
                    margin:0 3px;
                }
            </style>
            <script type="text/javascript">
            max=100
            function change(id,width,height,tmax){
                        document.getElementById('img-'+id).style.width=width+"px"
                        document.getElementById('img-'+id).style.height=height+"px"
                        document.getElementById('img-'+id).style.border=tmax+"px solid #FFFFFF"
                    }
            function resize(imageID,way){
                var width=120
                var height=120
                i=max/2
    
                while(i>0){
                    i--
                    width+=2
                    height+=2
                    var t=setTimeout("change(" + imageID + "," +width + "," + height + "," + i+")",(way==0?(max/2-i)*5:i*5)+100)
                }
            }
            </script>
        </head>
    <body>
    <div id="images">
    
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-1" onmouseover="resize('1',0)" onmouseout="resize('1',1)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-2" onmouseover="resize('2',0)" onmouseout="resize('2',1)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-3" onmouseover="resize('3',0)" onmouseout="resize('3',1)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-4" onmouseover="resize('4',0)" onmouseout="resize('4',1)"/>
        <img src="http://www.hermann-uwe.de/files/images/blue_flower.preview_0.jpg"
            id="img-5" onmouseover="resize('5',0)" onmouseout="resize('5',1)"/>
    
    </div>
    
    <div id="text"></div>
    
    </body>
    </html>


  •  

    Posting Permissions

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