(e-mail address removed) said on 28/03/2006 12:34 PM AEST:
What I want is an element with a shifting background image:
Firstly, I hate such things and since you have an interval of 200ms it
will 'jiggle' rather than 'shift'. But anyhow...
<html><head>
<script type="text/javascript">
var x = 0
var y = 0
inc = 4
User var here too. Don't rely on automatic semicolon insertion, do it
yourself. Also, indent/block code properly, the easier you make life
for others the more likely they are to help you.
Presuming the onload event fires, (see below), el will be a reference
to the A element, and...
x = x + Math.round(2*inc*Math.random())-inc
y = y + Math.round(2*inc*Math.random())-inc
el.style.backgroundPosition = x + 'px ' + y + 'px'
setTimeout('bgWander(el)',200)
.... 'el' is a local variable to bgWander. When setTimeout runs and
attempts to evaluate 'el' (bgWander() will be called from the global
scope and besides, the original variable has been destroyed), it can't
find it and will error.
Your choices for fixes are: make el global (not recommended), hard-code
the reference to el say using getElementById (not recommended either),
store el elsewhere (OK but not really the best option here) or use a
function statement as the first parameter of setTimeout:
setTimeout(function(){bgWander(el)};,200)
it's not supported by some (very) old browsers. It creates a closure
back to bgWander so the variables aren't destroyed.
Since el is passed to the function, why not pass x, y and inc and get
rid of all the globals?
<script type="text/javascript">
function bgWander(el, x, y, inc)
{
x = x + Math.round(2*inc*Math.random()) - inc;
y = y + Math.round(2*inc*Math.random()) - inc;
el.style.backgroundPosition = x + 'px ' + y + 'px';
setTimeout(function(){bgWander(el, x, y, inc);}, 200)
}
</script>
}
</script></head><body>
<a onLoad="bgWander(this)" href=""
The onload attribute is not supported for A elements in all browsers.
The HTML 4 specification defines an onload attribute for frameset and
body elements only.
But keep it as onload, that way only people using browsers that support
onload for A elements will be annoyed by it.
style="background:url(images/bgbar.png)">Link</a>
</body></html>
Can you show me the error of my ways?
Don't jiggle images.
