CODEWITHSUNDEEP
javascriptjqueryhtml
user3871
user3871

Reputation: 12718

jQuery image swap if else

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>

Upvotes: 2

Views: 727

Answers (3)

Bergi
Bergi

Reputation: 664444

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);
});

Upvotes: 3

Ram
Ram

Reputation: 144689

Why not using css(oops, background image for an image)?

#comicssubsite {
   background-image: ...
}

#comicssubsite:hover {
   background-image: ...
}

Note that your markup is invalid, IDs must be unique, you should use classes instead of the IDs, you can also change the IDs to Comics, Artwork .. and use hover and attr methods.

$('.pages img').hover(function(){
    $(this).attr('src', function(i, src){
       return src.indexOf('hover')
       ? './images/SiteDesign/'+this.id+'_subsites.png'
       : './images/SiteDesign/'+this.id+'_subsites_hover.png'
    })
})

Upvotes: 3

apparatix
apparatix

Reputation: 1512

Your first if statement is always returning true because each image tag has a source.

If you have this:

var comic = document.getElementById("comicssubsite").src;

and then this:

if (comic) {
//code
}

All the if statement is doing is checking that comic exists, which it does.

Upvotes: 2

Related Questions