Question

I’m trying to write a basic image swap with javascript/jquery.

For some reason, my if/else statements aren’t running correctly. Am I using this incorrectly?

Thanks

Javascript:

    <script type="text/javascript">
        var images = new Array();
        var comic = document.getElementById("comicssubsite").src;
        var artwork = document.getElementById("artworksubsite").src;
        var about = document.getElementById("aboutsubsite").src;

        images[0] = "./images/SiteDesign/Comics_subsites_hover.png";
        images[1] = "./images/SiteDesign/Comics_subsites.png";

        images[2] = "./images/SiteDesign/Artwork_subsites_hover.png";
        images[3] = "./images/SiteDesign/Artwork_subsites.png";

        images[4] = "./images/SiteDesign/About_subsites_hover.png";
        images[5] = "./images/SiteDesign/About_subsites.png";

        function onHover() {
            if (comic) {
            $("#comicssubsite").attr('src', images[0]);
            }
            else if (artwork) {
            $("#artworksubsite").attr('src', images[2]);
            }
            else if (about) {
            $("#aboutsubsite").attr('src', images[4]);
            }
        }
        function offHover() {
            if (comic) {
            $("#comicssubsite").attr('src', images[1]);
            }
            else if (artwork) {
            $("#artworksubsite").attr('src', images[3]);
            }
            else if (about)
            $("#aboutsubsite").attr('src', images[5]);
            }
        }

    </script>

HTML (snippet)

            <div class="span2">
                <div id="pages">
                    <span class="pageitems" ><a href="./?action=homepage&page=1&site=comics"><img id="comicssubsite" src="./images/SiteDesign/Comics_subsites.png" alt="comics bg" onmouseover="onHover();" onmouseout="offHover();"/></a></span>
                </div>
            </div>
            <div class="span2">
                <div id="pages">
                    <span class="pageitems"><a href="./?action=homepage&page=1&site=artwork"><img id="artworksubsite" src="./images/SiteDesign/Artwork_subsites.png" alt="artwork bg" onmouseover="onHover();" onmouseout="offHover();"/></a></span>    
                </div>
            </div>
            <div class="span2">
                <div id="pages">
                    <span class="pageitems"><a href="./?action=homepage&page=1"><img id="aboutsubsite" src="./images/SiteDesign/About_subsites.png" alt="about bg" onmouseover="onHover();" onmouseout="offHover();"/></a></span>
                </div>
            </div>

Answer 1

Your if-statements check for the src attribute of the respective element to be not empty. That is not really what you want – they always will be executed. Also, you should use jQuery everywhere if you have decided to use it, especially on DOM things like event handling.

Your use of an array as a data structure is a good start, yet quite useless as you still address the items manually instead of programmatically. Use an object [literal] as a key-value-map to get the urls by the image id:

jQuery(document).ready(function($) {
    var images = {
        "comicssubsite": [
            "./images/SiteDesign/Comics_subsites_hover.png",
            "./images/SiteDesign/Comics_subsites.png"
        ],
        "artworksubsite": [
            "./images/SiteDesign/Artwork_subsites_hover.png",
            "./images/SiteDesign/Artwork_subsites.png"
        ],
        "aboutsubsite": [
            "./images/SiteDesign/About_subsites_hover.png",
            "./images/SiteDesign/About_subsites.png"
        ]
    };
    function mouseover(e) {
        if (this.id in images) // check for key in map
            this.src = images[this.id][0];
    }
    function mouseout(e) {
        if (this.id in images)
            this.src = images[this.id][1];
    }
    $("#comicssubsite, #artworksubsite, #aboutsubsite").hover(mouseover, mouseout);
    // You might want to use a loop instead, then you don't need to write the ids twice:
    // for (var id in images)
    //     $('#'+id).hover(mouseover, mouseout);
});