I want to take an image and expand it by 2 in both height and width every 50 milliseconds, creating the illusion of an expansion. Being as unexperienced as i am, i cannot figure out the EXACT way to do that, so i figure i'll show you my source and ask for input. here it is:
any suggestions are greatly appreciated.. plus, could someone give me a good site with ALL javascript commands and what they do?
brendandonhue
05-13-2003, 06:57 PM
Here is what I came up with. Its not working perfectly, im not sure why. It expands huge, really really fast. It shouldn't be going that quick. But its a start.
<img src="images.jpg" name="image" width="100" height="100">
<script language="javascript">
function expand()
{
var height = document.image.height;
var width = document.image.width;
var heightNum = height -0;
var widthNum = width -0;
var changeBy = "2"
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
document.image.height = newHeight;
document.image.width = newWidth;
setTimeout("expand()",50)
}
expand()
</script>
Jona
05-13-2003, 07:01 PM
<html>
<head>
<title>Image expansion</title>
<SCRIPT LANGUAGE="JavaScript">
var start, stop;
function coord(imgName, pm) {
var w = document.images[imgName.name].width;
var h = document.images[imgName.name].height;
eval("document.images[imgName.name].height"+pm+"=2");
eval("document.images[imgName.name].width"+pm+"=2");
}
function begin(imgName){
start=setInterval("coord(img, '+')", 50);
clearInterval(stop);
}
function stop(imgName){
setInterval("coord(img, '-')", 50);
clearInterval(start);
}
</script>
</head><body>
<center>
<br><br><br><br>
<img name="img" src="../CMM/images/about_logo.jpg" onMouseOver="begin(this);" onMouseOut="stop(this);"><br>
</body>
</html>
brendandonhue
05-13-2003, 07:08 PM
Fixed it, I had changeBy as a string instead of an integer, it was expanding fast because the width was going
100
1002
10022.
Here is the corrected script. Looks pretty neat :)
You might want to change it to stop before the image gets too big.
<img src="images.jpg" name="image" width="100" height="100">
<script language="javascript">
function expand()
{
var height = document.image.height;
var width = document.image.width;
var heightNum = height -0;
var widthNum = width -0;
var changeBy = parseInt("2")
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
document.image.height = newHeight;
document.image.width = newWidth;
setTimeout("expand()",50)
}
expand()
</script>
Jona
05-13-2003, 07:12 PM
Brendandonhue, this stops it after it gets to 200 height or width:
<img src="images.jpg" name="image" width="100" height="100">
<script language="javascript">
function expand() {
var height = document.image.height;
var width = document.image.width;
var heightNum = height -0;
var widthNum = width -0;
var changeBy = parseInt("2")
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
document.image.height = newHeight;
document.image.width = newWidth;
var s = setTimeout("expand()",50)
if(document.image.height==200||document.image.height==200){
clearTimeout(s);}
}
expand()
</script>
But, one thing to keep in mind: This will automatically increase the image's size instead of onmouseover and onmouseout. Also, your code doesn't decrease the image size.
brendandonhue
05-13-2003, 07:23 PM
Thx Jona, did this before I saw your reply. Anyway, your probably better at this but im learning. I like to put everything in variables. That way its easier for me to understand my own script, and easier to customize.
Here this goes onMouseOver and stops at 1000.
<img src="images.jpg" name="image" width="100" height="100" onmouseover="javascript:expand()">
<script language="javascript">
function expand()
{
var height = document.image.height;
var width = document.image.width;
var heightNum = height -0;
var widthNum = width -0;
var changeBy = parseInt("2")
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
var maxHeight = parseInt("1000");
var maxWidth = parseInt("1000")
if (newWidth < maxWidth && newHeight < maxHeight )
{document.image.width = newWidth
document.image.height = newHeight};
else
{stop()}
setTimeout("expand()",50)
}
function stop()
{
}
</script>
Jona
05-13-2003, 07:26 PM
Variables actually take up more memory (although that's not a problem unless you have a really big page). Also, you don't have to use parseInt("100") or anything like that. You can just use 100. You originally had "2" in quotes, but in Javascript that makes it become a string instead of an integer. So you can just use 1000 instead of parseInt(). ;)
Greelmo
05-13-2003, 09:03 PM
I copied and pasted your text to see how it worked, but it didn't work on my computer. I wonder if i'm doing something wrong. also, i think that i'm totally missing something here. I guess i just need more exp. Thanks for the help though
khalidali63
05-13-2003, 10:10 PM
You can try this link to see if this is what you wanted..
What browser are you using? My code only works in IE (dunno why, I get error: image is undefined, but in brendan's code, which is similar to my *new* one [which I haven't posted yet by the way] and uses the same concept of document.imageName).
brendandonhue
05-14-2003, 05:00 AM
I am working on mine so it will downsize onmouseout.
Not sure why, but mine won't work in NS either. Odd.
Maybe it can't reference images with .height and .width.
I wrote another script where you type in the width and height, and it resizes the image. It works fine in NS.
Jona
05-14-2003, 10:29 AM
It's odd, the way NS6 works. What I'm gonna do, is re-write the script for if(!document.all){ //if Netscape then I'll have a bunch of new script, which I don't really want to have and I would like it to work regardless, but...... :)
brendandonhue
05-15-2003, 06:22 AM
This works in IE and NS. Yay.
But I can't do the image downsize onmouseout. Its just not working. I have tried a dozen ways.
I would think
onmouseover="javascript:Expand()" onmouseout="javascript:Stop()" would work when I did a STOP function that was like the opposite of the Expand so it would increase by -2 instead of 2, and use MinWidth instead of MaxWidth, etc. So Jona maybe you can figure that out.
But heres what I've got that works in NS, using the Document.Images array. I could only reference it as [0], [ImageName] wasn't working.
<img src="images.jpg" name="image" onmouseover="javascript:expand()">
<script language="javascript">
function expand()
{
var height = document.images[0].height;
var width = document.images[0].width;
var heightNum = height +0;
var widthNum = width +0;
var changeBy = 2;
var maxHeight = 1000;
var maxWidth = 1000;
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
if (newWidth < maxWidth && newHeight < maxHeight )
{document.images[0].width = newWidth;
document.images[0].height = newHeight}
else
{}
setTimeout("expand()",50)
}
</script>
Gollum
05-15-2003, 06:42 AM
Are you sure you are stopping the expansion?
it looks by your code the expand timeOut loop is continuing forever.
starting a contraction loop at the same time will just cancel out the expansion and leave the image the same size
Jona
05-15-2003, 10:36 AM
Well, we could pass changeBy through the function and set it as 2 on mouse over, -2 on mouse out; but then it would just get smaller and then get bigger again because of the setTimeout method. :eek:
Try using eval("expand("+changeBy+")", 50); as a variable (call it something like, fncBy or something), and use setTimeout(fncBy, 50);
Vladdy
05-15-2003, 10:45 AM
Found this in my "things I tried" folder. http://www.vladdy.net/Demos/ImageAdjustments.html
Jona
05-15-2003, 10:46 AM
lol, Vladdy, it's backwards! ;) (The Up goes down, and the Down goes up.)
Vladdy
05-15-2003, 10:53 AM
All movement is relative ;)
I move Image not the viewport :D :D
Jona
05-15-2003, 10:56 AM
I see. :)
brendandonhue
05-15-2003, 02:25 PM
Originally posted by Gollum
Are you sure you are stopping the expansion?
it looks by your code the expand timeOut loop is continuing forever.
starting a contraction loop at the same time will just cancel out the expansion and leave the image the same size
It is stopping at 1000, im sure.
I will try those suggestions to see if I can get it to get smaller...
brendandonhue
05-15-2003, 02:59 PM
Originally posted by Jona
Well, we could pass changeBy through the function and set it as 2 on mouse over, -2 on mouse out; but then it would just get smaller and then get bigger again because of the setTimeout method. :eek:
Try using eval("expand("+changeBy+")", 50); as a variable (call it something like, fncBy or something), and use setTimeout(fncBy, 50);
I dont quite understand how I would use that.
Heres what i've got now. The expand works, and onmouseout, it stops expanding, but I can't get it to downsize, and I don't know why its not.
<form name="changeByfrm">
<input type="hidden" name="changeBy">
</form>
<img src="images.jpg" name="image" onmouseover="javascript:expand(2)" onmouseout="javascript:expand(-2)">
<script language="javascript">
function expand(changeBy)
{
var height = document.images[0].height;
var width = document.images[0].width;
var heightNum = height +0;
var widthNum = width +0;
var maxHeight = 1000;
var maxWidth = 1000;
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
if (newWidth < maxWidth && newHeight < maxHeight)
{document.images[0].width = newWidth;
document.images[0].height = newHeight};
else {};
document.changeByfrm.changeBy.value = changeBy;
repeat()
}
function repeat()
{
var changeBy = document.changeByfrm.changeBy.value;
if (changeBy == 2) {setTimeout("expand(2)",50)}
else {setTimeout("expand(-2)",50)};
}
</script>
Jona
05-15-2003, 03:02 PM
I meant something like this:
<img src="images.jpg" name="image" onmouseover="javascript:expand(2)" onmouseout="javascript:expand(-2)">
<script language="javascript">
function expand(changeBy)
{
var fncChangeBy = eval("expand("+changeBy+")");
var height = document.images[0].height;
var width = document.images[0].width;
var heightNum = height +0;
var widthNum = width +0;
var maxHeight = 1000;
var maxWidth = 1000;
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
if (newWidth < maxWidth && newHeight < maxHeight)
{document.images[0].width = newWidth;
document.images[0].height = newHeight};
else {}
setTimeout(fncChangeBy, 50);
}
</script>
brendandonhue
05-15-2003, 03:15 PM
Hmm thats giving me a stack overflow at line 5.
Jona
05-15-2003, 03:22 PM
I didn't test it... Try using x=setTimeout(fncChangeBy, 50); and setTimeout("clear()", 900);
function clear(){
clearTimeout(x);
}
Of course, this means use var x; before you start any of the functions...
brendandonhue
05-15-2003, 03:28 PM
Waaah im confused now. Maybe I should leave this one to the pro's.
Jona
05-15-2003, 03:31 PM
No, you're doin' pretty good. ;)
brendandonhue
05-15-2003, 03:37 PM
:)
I'll figure it out eventually...
Jona
05-15-2003, 03:37 PM
Determination and perserverance is what got me where I am today. ;) Keep working. :)
brendandonhue
05-15-2003, 03:42 PM
I will :D
Just got my copy of The JavaScript Bible for my birthday so I will start reading that this weekend.
Jona
05-15-2003, 03:45 PM
Cool! I never even got a Javascript book (ok, I got a *small* one for $40 for Xmas, but other than that, no)....
brendandonhue
05-15-2003, 07:29 PM
Now I've made some progress. It gets smaller onmouseout, but I haven't gotten it to stop decreasing when it hits minHeight and minWidth yet.
<img src="images.jpg" name="image" onmouseover="javascript:expand(2);window.overImage = true" onmouseout="javascript:expand(-2);window.overImage = false">
<script language="javascript">
function expand(changeBy)
{
var heightNum = document.images[0].height +0;
var widthNum = document.images[0].width +0;
var maxHeight = 1000;
var maxWidth = 1000;
var minWidth = 100;
var minHeight = 100;
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
if (newWidth < maxWidth && newHeight < maxHeight)
document.images[0].width = newWidth;
document.images[0].height = newHeight;
if (window.overImage == true)
{
setTimeout("expand(2)",50)
}
else {setTimeout("expand(-2)",50);
}
}
</script>
Jona
05-15-2003, 08:04 PM
Pretty good. I told you that you could do it! ;) Keep trying... If ya need help (I mean if you REALLY need help) just ask! :)
brendandonhue
05-16-2003, 05:07 AM
Thx for the encouragement. I think I can get it, I just didn't have time yesterday.
brendandonhue
05-16-2003, 06:04 AM
Its perfected (as far as a simple image expansion goes, anyway).
OnMouseOver-Expands at a set speed, but no larger than the maximum size
OnMouseOut - Minimizes at a set speed, no smaller than the minimum size.
Works in both IE and Netscape. Not tested in any other browsers.
<img src="images.jpg" name="image" onmouseover="window.overImage = true;javascript:expand(2)" onmouseout="window.overImage = false;javascript:expand(-2)">
<script language="javascript">
function expand(changeBy)
{
var heightNum = document.images[0].height;
var widthNum = document.images[0].width;
var maxHeight = 1000;
var maxWidth = 1000;
var minWidth = 100;
var minHeight = 100;
var newHeight = heightNum + changeBy;
var newWidth = widthNum + changeBy;
a friend of mine did it on one of his pages perfectly, but he refuses to give me the code because he spent HOURS working on it. He did say that he did it using absolute values in order to keep the image from pushing everything else away. I'll work on getting his code.
brendandonhue
05-16-2003, 04:15 PM
Give me the URL, and I'll get you the script, however thats not very ethical.
Not completely understanding the absolute values thing, whether it goes automatically or by abs. value, its still going to take up space on the page and move things.
Greelmo
05-22-2003, 10:47 PM
<html>
<head>
<title>img expand</title>
<SCRIPT LANGUAGE="JavaScript">
function upsize(Changeby)
{
var oheight=document.imagey.height;
var owidth=document.imagey.width;
var maxheight=200;
var maxwidth=200;
var newheight=oheight+Changeby;
var newwidth=owidth+Changeby;
if (oheight<=maxheight && owidth<=maxwidth){
document.imagey.height=newheight;
document.imagey.width=newwidth;
dexter=setTimeout("upsize(2)", 3);}
else {
document.imagey.height=201;
document.imagey.width=201;}
}
function dwnsize(Changebya)
{
var oheighta=document.imagey.height;
var owidtha=document.imagey.width;
var maxheighta=50;
var maxwidtha=50;
var newheighta=oheighta+Changebya;
var newwidtha=owidtha+Changebya;
if (oheighta>=maxheighta && owidtha>=maxwidtha){
document.imagey.height=newheighta;
document.imagey.width=newwidtha;
dexter=setTimeout("dwnsize(-2)", 3);}
else {
document.imagey.height=50;
document.imagey.width=50;}
}
</script>
</head>
<body>
<img src="http://www.fanfare-kehlen.lu/images/instruments/flute.gif" width=50 height=50 name="imagey" onMouseover="window.overImage=true; upsize(2);" onMouseout="window.overImage=false; dwnsize(-2);">
</body>
</html>
that is as far as i got... but i can't get it so that when my mouse goes off the img in the middle of the sequence the sequence stops... any ideas... that last code didn't work for some reason (im using IE)
Greelmo
05-22-2003, 10:49 PM
haha... and how did i turn from "member" to "webmaster"? What do those mean?
Greelmo
05-22-2003, 11:48 PM
<html>
<head>
<title>img expand</title>
<style type="text/css">
div
{margin: 50}
</style>
<SCRIPT LANGUAGE="JavaScript">
function upsize(Changeby)
{
var oheight=document.imagey.height;
var owidth=document.imagey.width;
var maxheight=200;
var maxwidth=200;
var newheight=oheight+Changeby;
var newwidth=owidth+Changeby;
if (oheight<=maxheight && owidth<=maxwidth && window.overImage==true){
document.imagey.height=newheight;
document.imagey.width=newwidth;
var dexter=setTimeout("upsize(2)", 3);}
else {
document.imagey.height=oheight;
document.imagey.width=owidth;}
}
function dwnsize(Changebya)
{
var oheighta=document.imagey.height;
var owidtha=document.imagey.width;
var maxheighta=50;
var maxwidtha=50;
var newheighta=oheighta+Changebya;
var newwidtha=owidtha+Changebya;
if (oheighta>=maxheighta && owidtha>=maxwidtha){
document.imagey.height=newheighta;
document.imagey.width=newwidtha;
var dexterw=setTimeout("dwnsize(-2)", 3);}
else {
document.imagey.height=50;
document.imagey.width=50;}
}
</script>
</head>
<body>
<center>
<div>
<img src="http://www.fanfare-kehlen.lu/images/instruments/flute.gif" width=50 height=50 name="imagey" onMouseover="window.overImage=true; upsize(2);" onMouseout="window.overImage=false; dwnsize(-2);">
</body>
</html>
THATS IT!!! but it only works for IE...or at least, that's all i've tested it with...
Gollum
05-23-2003, 02:19 AM
Not bad.
2 suggestions I would make are...
store the context of the timeout in a global and then call window.clearTimeout(ctxt), e.g.
var ctxt;
function upsize(Changeby)
{
if ( ctxt ) window.clearTimeout(ctxt);
ctxt = null;
...
}
this will stop two upsize and/or dwnsize chains from running simultaneously - to reproduce with your code, put mouse over the image until it is full size, then quickly, go off image and then on again. The image size freezes. If you then take the mouse off the image again, it downsizes twice as fast as normal.
lastly, your upsize and dwnsize functions are very similar and could quite easily be merged into one. Then you could change the img handlers to onmouseover="chsize(2);" onmouseout="chsize(-2);"
have fun...
brendandonhue
05-23-2003, 05:15 AM
Yours has the same problem as mine, it doesn't work with multiple images on the page.
Gollum
05-23-2003, 06:21 AM
You can use the this object to make the expand and contract object based...
okay... thanks. How would i make it so the window checks whether or not the mouse is over ONE image... the window.overImage only works if there is one image becuase the browser is checking to see that it is over all the images on the page rather than on top of "imagey" I'll work on it guys. And do you have the answer to that "webmaster" thing and the "member" thing?
Gollum
05-27-2003, 02:41 AM
you could move the window.overImage variable to the img object. That way there will be one per image...