SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    somewehre
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Resizing In Javascript

    im using some javascript and a 1x1 pixel clear gif to make an effect that moves links right on mouseover, and back on mouse out. ive tested the functions below and they almost works perfectly, without parameters.

    Code:
    var img_width = 3; 
    var img_height = 1;
    var timer = null;
    
    function linkmf(imgn)
    {
    	clearTimeout('timer');
    	var growImg = document.getElementById('imgn').style;
    
    	growImg.width= img_width;
    	growImg.height= img_height;
    	
    	if(img_width != 15)
    	{
    		img_width += 1;
    		timer = setTimeout('linkmf()', 1);
    	} 
    	else
    	{
    		clearTimeout('timer');
    	}
    }
    
    function linkmb(imgn)
    {
    	clearTimeout('timer');
    	var growImg = document.getElementById('imgn').style;
    
    	growImg.width= img_width;
    	growImg.height= img_height;
    	
    	if(img_width != 3)
    	{
    		img_width -= 1;
    		timer = setTimeout('linkmb()', 1);
    	}
    	else
    	{
    		clearTimeout('timer');
    	}
    }
    the code for my links is
    PHP Code:
    <img src='images/site_skin/hold.gif' class="limg" id="<?=$res['id']?>" alt=''></img>
    <a href="<?=$res['url']?>" onMouseOver="linkmf(<?=$res['id']?>);" onMouseOut="linkmb(<?=$res['id']?>);" ><?=$res['display']?></a>
    and the class limg is simply
    .limg {
    width: 3;
    height: 1;
    }

    but, for some reason, pasing the id of the image isnt working. the php is correct because ive checked the html after parsing, the problem is in the html parameter imgn, could anyone help me?

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you neglected to pass the id in single quotes, causing it to be treated as a variable (it is one in Internet Explorer, but it already references the element involved). You also are cancelling a timer using a string, instead of the variable name you returned it to...but that's irrelevant - setTimeout only runs once anyway.

    More to the point: why do this at all? CSS hover was made for this type of effect. Just add some padding-left on hover (you may have to remove the same amount of padding-right simultaneously to keep things stable).

    http://builder.com.com/5100-31-5073316.html
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    somewehre
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i could do that, but theres more to the script than just this, and parts of it require the images. especially considering i want them to move slowly right, then slowly back, not just centered.

    but quotes aren't the problem. i have already tried every quote orientation, and they all turn up the same object required error.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <html>
    <head>
    <style type="text/css">
    
    a:link, a:visited {font: normal 16px "comic sans ms"; color: purple;}
    
    </style>
    <script type="text/javascript">
    
    var growImg;
    var img_min = 3;
    var img_max = 15;
    var img_width = img_min;
    var pixTimer = null;
    
    function linkmf(imgn)
    {
    	clearInterval(pixTimer);
    	growImg = document.getElementById(imgn);
    	pixTimer = setInterval('grow()', 10);
    }
    
    function grow()
    {
    	if (img_width < img_max)
    		growImg.style.width = String(++img_width + 'px');
    	else clearInterval(pixTimer);
    }
    
    function linkmb(imgn)
    {
    	clearInterval(pixTimer);
    	growImg = document.getElementById(imgn);
    	pixTimer = setInterval('shrink()', 10);
    }
    
    function shrink()
    {
    	if (img_width > img_min)
    		growImg.style.width = String(--img_width + 'px');
    	else clearInterval(pixTimer);
    }
    
    var s = document.getElementsByTagName('script')[0];
    
    </script>
    </head>
    <body>
    
    <img src="images/site_skin/hold.gif" class="limg" id="foo" alt="" />
    <a href="javascript&#58;alert(s.innerHTML)" onmouseover="linkmf('foo');" onmouseout="linkmb('foo');">
    <img border="0" src="http://www.sitepoint.com/forums/images/smilies/xeye.gif" /> Yikes !</a>
    <br />
    
    </body>
    </html>
    setInterval() works better than setTimeout (memory leaks, efficiency). You needed to remove these quotes - 'imgn' - as well as inserting singles around the PHP id hashes. Always use units for CSS, stylesheets or JS. <img /> tags have no closing tag.
    ::: certified wild guess :::

  5. #5
    SitePoint Member
    Join Date
    May 2004
    Location
    somewehre
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx, works perfect, even cleared up a few problem i had but didnt ask about like if i didnt let the link move althe way over before mouse out, mouse out wouldnt do anything and the next mousein would finsih the left motion..

    Thanx alot.

  6. #6
    SitePoint Member
    Join Date
    May 2004
    Location
    somewehre
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh wait, found a problem. it cant handle mutliple instances.
    go here http://www.relpats-eht.com/index.php?page=contact to se (this is far from the final version, just so u all know lol)

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <HTML> 
    <head>
    <TITLE>.:Some Backward Stapler Bytes:. - Contact</TITLE>
    <base href="http://www.relpats-eht.com/" />
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    
    <META name="Description" content="This is my site. It has alot help for programmers of many languages, games I and others have made, free stuff, resources for programmes, and alot of other stuff as well. Visit the forums to talk to othe people, to help you with things, or share things you have done. Hope you enjoy the site.">
    <META name="keywords" content="C++,Java,JavaScript,PHP,tutorials,programming tutorials,programming,free stuff,free games,games,c plus plus,shoutbox,relpats_eht,stapler,staplers,relpats-eht">
    <META name="author" content="relpats_eht (Andrew Shurney)">
    <META name="copyright" content="">
    <META name="expires" content='-1'>
    <META name="robots" content="all">
    
    <script type="text/javascript">
    
    var img_min = 3;
    var img_max = 15;
    var preimg = 2;
    var animDelay = 3;
    
    onload = function()
    {
    	var i = 0, link, links = document.getElementsByTagName('a');
    	while (link = links[i++])
    		if (link.className == 'menu')
    		{
    			link.spacerImg = document.getElementById('spacerImg' + i);
    			link.img_min = img_min;
    			link.img_max = img_max;
    			link.img_width = img_min;
    			link.animTimer = null;
    			link.onmouseover = function()
    			{
    				clearInterval(this.animTimer);
    				var obj = this;
    				this.animTimer = setInterval(
    					function()
    					{
    						if (obj.img_width < obj.img_max)
    							obj.spacerImg.style.width = String(++obj.img_width + 'px');
    						else clearInterval(obj.animTimer);
    					}
    							, animDelay);
    			}
    			link.onmouseout = function()
    			{
    				clearInterval(this.animTimer);
    				var obj = this;
    				this.animTimer = setInterval(
    					function()
    					{
    						if (obj.img_width > obj.img_min)
    							obj.spacerImg.style.width = String(--obj.img_width + 'px');
    						else clearInterval(obj.animTimer);
    					}
    							, animDelay);
    			}
    		}
    
    }
    
    </script>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" border="0" width="750" height="600" align="center">
    <tr>
    <td width="100%" height="100"><img src="images/site_skin/title4.jpg" alt="relpats_eht.com"></img></td>
    </tr>
    <tr>
    <td width="100%" height="490" cellspacing="10" cellpadding="0">
    	<table width="100%" height="490" border="0" align='left' valign="top">
    	<tr>
    	<td width="25%" height="490" valign="top" cellpadding="0" cellspacing="0">
    		<!-- links menu start -->
    		<table width="100%" height="490" cellspacing="0" cellpadding="0" border="0" valign="top">
    		<tr>
    		<td width="100%" height="21" class="title"><b>&nbsp;&curren;&nbsp;Links</b></td>
    		</tr>
    		<tr>
    		<td class="section" width="100%" height="470" valign="top">
    							<center><b>Community</center></b>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg1" alt=''>
    					<a class="menu" href="index.php?page=index">Home</a><br>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg2" alt=''>
    					<a class="menu" href="index.php?page=contact">Contact</a><br>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg3" alt=''>
    					<a class="menu" href="obb/index.php">Forum</a><br>
    									<center><b>Tutorials</center></b>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg4" alt=''>
    					<a class="menu" href="index.php?page=ogltut">OpenGl</a><br>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg5" alt=''>
    					<a class="menu" href="index.php?page=cpptut">C++</a><br>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg6" alt=''>
    					<a class="menu" href="index.php?page=phptut">PHP</a><br>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg7" alt=''>
    					<a class="menu" href="index.php?page=javascripttut">JavaScript</a><br>
    										<img src='images/site_skin/hold.gif' class="limg" id="spacerImg8" alt=''>
    					<a class="menu" href="index.php?page=javatut" >Java</a><br>
    							</td>
    		</tr>
    		<tr>
    		<td width="100%" height="11" class="footer"></td>
    		</tr>
    		</table>
    		<!-- links menu end -->
    	</td>
    	<td width="50%" height="490" valign="top">
    		<!-- Main Content Start -->
    		<table width="100%" height="490" cellspacing="0" cellpadding="0" border="0" valign="top">
    		<tr>
    		<td width="100%" height="21" class="title"></td>
    		</tr>
    		<tr>
    		<td class="section" width="100%" height="470">
    		<center>
    			<HTML> 
    <head>
    <link rel="icon" href="images/favicon.ico">
    <link rel="SHORTCUT ICON" href="images/favicon.ico">
    <link rel="bookmark" href="images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <TITLE>egapemoH s'relpatS_ehT</TITLE>
    <script language='javascript'>
    function smilie(face) {
    document.form.message.value += ' ' + face + ' ';
    document.form.message.focus();
    }
    
    function jump(form) {
    myindex=form.menu.selectedIndex
    if (form.menu.options[myindex].value != "0") {
    window.open (form.menu.options[myindex].value, target="_blank");
    }
    }
    </script>
    <META name="Description" content="This is my site. It has alot help for programmers of many languages, games I and others have made, free stuff, resources for programmes, and alot of other stuff as well. Visit the forums to talk to othe people, to help you with things, or share things you have done. Hope you enjoy the site.">
    <META name="keywords" content="C++,Java,JavaScript,PHP,tutorials,programming tutorials,programming,free stuff,free games,games,c plus plus,shoutbox,relpats_eht,stapler,staplers,relpats-eht">
    <META name="author" content="relpats_eht (Andrew Shurney)">
    <META name="copyright" content="">
    <META name="expires" content='-1'>
    <META name="robots" content="all">
    </head>
    <body><center><h3>Contact Me</h3></center><br><br>
    <table width="400" align="center">
    <tr>
    <td width="400" align="center">
    If you want to contact me here are two ways you in which you can; by an instant messanger of 
    some sort. Or by E-Mail. To send me an Instant message use one of the folloing names.<br>
    </td>
    </tr>
    <tr><td>
    <table cols="2" align="center" border="2" bordercolor="000000">
    <tr><td><b>AIM:</b></td><td>relpats eht<br></td></tr>
    <tr><td><b>YIM:</b></td><td>relpats_eht<br></td></tr>
    <tr><td><b>ICQ:</b></td><td>296824731<br></td></tr>
    <tr><td><b>MSN:</b></td><td>relpats_eht@yahoo.com</td></tr>
    </table></td></tr>
    <tr><td width="400" align="center"><br>
    If you are sending by E-Mail, Just fill out this form, click submit and it will be 
    sent to me. If there is an * the field is required.<br><br></td></tr>
    <tr><td width="400" align="center">
    <form name="mailform" method="POST" action="index.php?page=sent">
    <table cols="2" align="center" border="2" bordercolor="000000">
    <tr>
    <td>Your Name:*</td>
    <td><input type=text name="name" size="20" maxlength="50"></td></tr>
    <tr>
    <td>Your E-mail:*</td>
    <td><input type=text" name="email" size="20"></td></tr>
    <tr>
    <td>Your Site:</td>
    <td><input type="text" name="site" size="20"></td></tr>
    <tr>
    <td colspan="2">
    <center>Whatever you wanted to say:*<br>
    <textarea name="comments" cols="30" rows="10" wrap="virtual"></textarea></td></tr>
    <tr>
    <td><input type="submit" name='submit' value="Submit"></td>
    <td><input type="reset" value="Clear"></td></tr>
    </center>
    </table>
    </form>
    </td></tr>
    </table>		</center>
    		</td>
    		</tr>
    		<tr>
    		<td width="100%" height="11" class="footer"></td>
    		</tr>
    		</table>
    		<!-- Main Content End -->
    	</td>
    	<td width="25%" height="398" valign="top">
    		<!-- Misc Section Start -->
    		<table width="100%" height="490" cellspacing="0" cellpadding="0" border="0" valign="top">
    		<tr>
    		<td width="100%" height="21" class="title"></td>
    		</tr>
    		<tr>
    		<td class="section" width="100%" height="470">		
    		<!-- Misv content -->
    		</td>
    		</tr>
    		<tr>
    		<td width="100%" height="11" class="footer"></td>
    		</tr>
    		</table>
    		<!-- Misc Content end -->
    	</td>
    	</tr>
    	</table>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by adios; May 25, 2004 at 20:52.
    ::: certified wild guess :::

  8. #8
    SitePoint Member
    Join Date
    May 2004
    Location
    somewehre
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for helping so much for all ur help. after clearing up a few things to make the script work with my mysql retrieved links, the thing worked perfect.

    can't thank u enough, its really an awesome effect lol!


Bookmarks

Posting Permissions

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