By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

Swap images problem

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

Here is my code:
<script language="JavaScript" type="text/javascript">
<!--
function mouseover(source)
{
// alert("source over is '" + source + "'");
document[source].src = eval("../images/" + source + "f2.gif");
}
function mousedown(source)
{
// 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.php?belt=yellow">
<img src="../images/Yellow.gif" name="yellow"
onMouseOver="mouseover('yellow')"
onMouseDown="mousedown('yellow')"
onMouseOut="mouseout('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
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Lee David wrote:
I'm trying to change the images between "active",
"hover" and "pressed," but it isn't working.

Here is my code:
<script language="JavaScript" type="text/javascript">
<!--
function mouseover(source)
{
// alert("source over is '" + source + "'");
document[source].src = eval("../images/" + source + "f2.gif");
}

<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(source){
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.
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.