Swap images problem

[Lee David]

I'm trying to change the images between "active", "hover" and "pressed," but
it isn't working.

Here is my code:
<script language="JavaS cript" type="text/javascript">
<!--
function mouseover(sourc e)
{
// alert("source over is '" + source + "'");
document[source].src = eval("../images/" + source + "f2.gif");
}
function mousedown(sourc e)
{
// alert("source down is '" + source + "'");
document[source].src = eval("../images/" + source + "f3.gif");
}
function mouseout(source )
{
// alert("source out is '" + source + "'");
document[source].src = eval("../images/" + source + ".gif");
}
-->
</script>

and it is called from within HTML by this:
<a href="belts2.ph p?belt=yellow">
<img src="../images/Yellow.gif" name="yellow"
onMouseOver="mo useover('yellow ')"
onMouseDown="mo usedown('yellow ')"
onMouseOut="mou seout('yellow') "
alt="Yellow Button" id="yellow" border="0"></a></td>

I haven't done this in years and years so I need a quick refresher on what
I'm doing wrong.

TIA, Lee

[Richard Cornford]

Re: Swap images problem

Lee David wrote:[color=blue]
> I'm trying to change the images between "active",
> "hover" and "pressed," but it isn't working.
>
> Here is my code:
> <script language="JavaS cript" type="text/javascript">
> <!--
> function mouseover(sourc e)
> {
> // alert("source over is '" + source + "'");
> document[source].src = eval("../images/" + source + "f2.gif");
> }[/color]
<snip>

Javascript programmers do not use the - eval - function in any but the
most exceptional circumstances. On the other hand people who don't know
javascript often use it without any apparent appreciation of what it
actually does.

Eval takes one argument, and that argument must be a string. If it is
not a string then it is just returned by the function call (no
type-conversion to a string is allowed). Your argument is a string; the
string resulting from the two concatenation operations:-

"../images/" + source + "f2.gif"

The string is then treated as javascript source code, interpreted as a
javascript Program and executed. The result of that execution is then
returned. However, your string starts with two dot operators (a syntax
error), a division operator, an undefined identifier, another division
operator, and so on.

Obviously that will not execute successfully. But because the string is
executed in the - eval - function the resulting errors are indirect and
difficult to properly comprehend. This is one of the reasons that the
use of - eval - is highly discouraged. The other being that it is almost
never necessary (which is why it is almost never used by javascript
programmers).

Doing no more than removing the eval call will render the functions
functional, though it would also be preferable to be referencing
named/IDed IMG elements through the W3C HTML DOM specified (and very
back compatible) - document.images - collection. So:-

function mouseover(sourc e){
document.images[source].src = "../images/" + source + "f2.gif";
}

- and it is advisable to verify the existence of any browser feature (no
matter how common) prior to using it.

Richard.