Subscribe
function growImage(){
// this is triggered by a mouseOver event...
// increase image's height
this.height++;
// check and see if it's < 200 pixels in size if (this.height 200) { // set self-recursive timer my_timeout=setTimeout(" growImage;" , 1000); } } /code>
What seems to happen is it increments the size on the first pass, and then loses the global "this" value when it iterates (I think). I want to be able to call this function from any image on the page, and have that image grow and shrink in a smooth fashion (like the animated Google toolbar that surfaced lately).
Perhaps in a more generalized question (there I go, searching for a generalized solution...), where's a good place to ask a question like this? There are so many sites, but I don't know what's a "good" one to quiz...
Thanks in advance.<head> <title>Effects demo page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="prototype.js"></script></head><img src="/images/upload.jpg" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>would do it.
<!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> Untitled
<script language="javascript">
function scaleTo(elementId, maxY){
var element = document.getElementById(elementId);
var height;
if(element.style.height == null){
height = asNum(element.style.height);
} else{
height = element.height;
}
if(height < maxy){br>
element.style.height = (height + 10) + "px";
element.timeout = setTimeout("scaleTo('"+elementId+"',"+maxY+");", 50);
}
else{
// all done.
}
}
function asNum(size){
alert(size);
if(size.indexOf("px") != -1){
return parseInt(size.substring(0, size.indexOf("px")));
} else {
return parseInt(size);
}
}
</script>
</head>
<body>
<img id="fig1" src="news.jpg" width="79" height="57" border="0" onmouseover="scaleTo(this.id, 300);" />
</body>
</html>
</code>
// called on load of document
function init(){
// grab div named "content"
var content=document.getElementById("pictures");
// search for image tags
var thumbs = content.getElementsByTagName("IMG");
// search for anchor tags
var pics = content.getElementsByTagName("A");
// go through image tags and assign function to mouseover and mouseout
for (i=0; i< thumbs.length; i++){br>
thumbs[i].onmouseover = makeBig;
if (pics[i].captureEvents) pics[i].captureEvents(Event.MOUSEOVER);
thumbs[i].onmouseout = makeSmall ;
if (pics[i].captureEvents) pics[i].captureEvents(Event.MOUSEOUT);
}
// go through anchor tags and assign function to click
for (i=0; i< pics.length; i++){br>
pics[i].onclick= showImage;
if (pics[i].captureEvents) pics[i].captureEvents(Event.CLICK);
}
}
function growImage(){
var myfunc = function self() {
if (this.height < 200) {
this.height++;
setTimeout(self, 1000);
}}
myfunc();
}note how the function self is defined inside a context where "this" has a value. that means that every time that function is called, "this" has the value you expect.
function growImage(){
var myfunc = function blah() {
if (wha.height < 60) {br>
wha.height++;
setTimeout(blah, 1);
}
}
var wha = this;
myfunc();
}
var wha = this to before the definition of the function self it might be more portable. as i said, i don't remember enough of javascript to know if this is critical for that language.
function makeBig(){
function blah() {
if (wha.height < 60)br>
{
wha.height++;
setTimeout(blah,10);
}
}
var wha = this;
blah();
}
posted by seanyboy at 12:20 PM on April 13, 2005