Swap images problem

Discussion in 'Javascript' started by Lee David, Apr 5, 2005.

  1. Lee David

    Lee David Guest

    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
     
    Lee David, Apr 5, 2005
    #1
    1. Advertisements

  2. <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.
     
    Richard Cornford, Apr 6, 2005
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.